画像をホバーした時のzoom機能を適用させたい

画像を３行３列計９個並べるのですが、
画像をホバーした際、画像サイズからはみ出さないようにzoomしたいと思います。
css内で下記のコードで対応させようとしたのですが、
画像が拡大表示される現状です。

----------css追加コード↓----------
.photo-cssGrid a {
overflow:hidden;
margin: 0 auto;
width: 350px;
height: 150px;
}
.photo-cssGrid img {
width: 100%;
height: 100%;
object-fit: cover;
transition:1s all;
}
.photo-cssGrid img:hover {
transform:scale(1.2,1.2);
transition:1s all;
}

参考urlです。（サイト内での項目【cssで画像がzoomした時にはみ出た部分を非表示にした時のサンプル】のようにしたいです）
https://weconet.co.jp/css_image_zoom/

html, cssのコードを添付しました。
お手数ですが、よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>タイトルタイトルタイトル</title>
7        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10        <link rel="stylesheet" href="css/style.css">
11        <link rel="stylesheet" href="css/responsive.css">
12        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
13    </head>
14    <body>
15        
16        <div class="photo-wrapper">
17            <div class="container">
18                <div class="heading">
19                    <h2>ダミーダミーダミー</h2>
20                </div>
21                <div class="photo-cssGridContainer">
22                    <div class="photo-cssGrid"><!--ここからホバー時のzoom部分-->
23                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
24                    </div>
25                    <div class="photo-cssGrid">
26                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
27                    </div>
28                    <div class="photo-cssGrid">
29                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
30                    </div>
31                    <div class="photo-cssGrid">
32                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
33                    </div>
34                    <div class="photo-cssGrid">
35                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
36                    </div>
37                    <div class="photo-cssGrid">
38                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
39                    </div>
40                    <div class="photo-cssGrid">
41                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
42                    </div>
43                    <div class="photo-cssGrid">
44                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
45                    </div>
46                    <div class="photo-cssGrid">
47                        <a href="#"><img src="ダミーダミーダミー" alt=""></a>
48                    </div>
49                </div>
50                <div class="more-btn">
51                    <a class="message-more" href="#">ダミーダミーダミー</a>
52                </div>
53            </div>
54        </div>
55        
56    </body>
57</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    width: 1170px;
20    padding: 0 15px;
21    margin: 0 auto;
22}
23
24.photo-wrapper {
25    padding: 100px 0;
26    text-align: center;
27}
28.photo-cssGridContainer {
29    display: grid;
30    grid-template-columns: 1fr 1fr 1fr;
31    gap: 35px 20px;
32    padding-top: 45px;
33}
34.photo-cssGrid { /*ここで指定しているpaddingは残したい*/
35    padding: 0 10px;
36}
37.photo-cssGrid a { /*ホバー時のzoom指定*/
38    overflow:hidden;
39    margin: 0 auto;
40    width: 350px;
41    height: 150px;
42}
43.photo-cssGrid img { /*ホバー時のzoom指定*/
44    width: 100%;
45    height: 100%;
46    object-fit: cover;
47    transition:1s all;
48}
49.photo-cssGrid img:hover { /*ホバー時のzoom指定*/
50    transform:scale(1.2,1.2);
51    transition:1s all;
52}
53

Lhankor_Mhy

2020/12/24 08:04

↓この質問との違いは何ですか？ https://teratail.com/questions/312108

user20

2020/12/24 10:56

先ほどは、ご回答いただき誠にありがとうございました。同じ変化を加えたいのですが、今回適用する箇所では、グリッドレイアウトを使用したためか同じようにcssコードを記入してもうまくいかなかったために質問させていただきました。

user20

2020/12/24 11:01

追加で失礼します。質問欄に添付したコードは、先ほどLhankor Mhy様にご回答いただいた https://teratail.com/questions/312108の時のように試してみましたが、画像が拡大してzoomされてしまい、うまく対応させることが出来ませんでした。お手数おかけしますが、教えていただけると幸いです。

Daregada

2020/12/24 15:06

zoomという言葉に(他人に通じない)特殊な意味を持たせていませんかね。 zoomという英単語には、「画像サイズを変えないまま、画像の一部を拡大する」という意味はありません。あなたが参考にしたWebページにも、「枠内でズーム」「300px内でzoom」「zoomした時にはみ出た部分を非表示」などの表現で、ズーム自体に「画像サイズを変えない」という意味がないことは明らかです。

unrealsho

2020/12/26 11:35

他の方も言う通り「画像をホバーした際、画像サイズからはみ出さないようにzoomしたい」「画像が拡大表示される現状です。」が曖昧で伝わってないようです。画像サイズから”何”がはみ出さないように”何”をzoomしたいのでしょうか？拡大表示される現状、というのももう少し詳しく書いていただけると回答できるかもしれません。