cssで画像をホバーした時にimg画像をzoomさせたい

クラス名をactivity-imageとしたimg画像をホバーした時に、
zoomさせたいのですが、zoomと同時に画像自体も拡大してしまいます。

使用したコード(css)↓
.activity-flexbox {overflow:hidden;}
.activity-image {transition:1s all;}
.activity-image:hover {transform:scale(1.2,1.2);}
.activity-image:hover {transition:1s all;}

参考URLを添付しました、そのサイト内での項目、
【cssで画像がzoomした時にはみ出た部分を非表示にした時のサンプル】　にあるような見せ方をしたいです。
https://weconet.co.jp/css_image_zoom/

よろしくお願いいたします。

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        <div class="activity-wrapper">
16           <div class="container">
17                <div class="heading">
18                    <h2>ダミーダミーダミー</h2>
19                </div>
20                <div class="activity-flexboxContainer">
21                    <div class="activity-flexbox"> <!--ホバー時のzoom表示箇所-->
22                        <img class="activity-image" src="ダミーダミーダミー" alt="">
23                        <h3>ダミーダミーダミー</h3>
24                        <img class="activity-mark mark-space" src="images/index/activity-mark.svg" alt="">
25                    </div>
26                    <div class="activity-flexbox">
27                        <img class="activity-image" src="ダミーダミーダミー" alt="">
28                        <h3>ダミーダミーダミー</h3>
29                        <img class="activity-mark mark-space" src="images/index/activity-mark.svg" alt="">
30                    </div>
31                    <div class="activity-flexbox">
32                        <img class="activity-image" src="ダミーダミーダミー" alt="">
33                        <h3>ダミーダミーダミー</h3>
34                        <img class="activity-mark" src="images/index/activity-mark.svg" alt="">
35                    </div>
36                    <div class="activity-flexbox">
37                        <img class="activity-image" src="ダミーダミーダミー" alt="">
38                        <h3>ダミーダミーダミー</h3>
39                        <img class="activity-mark" src="images/index/activity-mark.svg" alt="">
40                    </div>
41                </div>
42            </div>
43        </div>
44    </body>
45</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.activity-wrapper {
25    background-color: #f7f7f7;
26    padding: 100px 0;
27    text-align: center;
28}
29.activity-flexboxContainer {
30    padding-top: 45px;
31    display: flex;
32    flex-wrap: wrap;
33    justify-content: space-between;
34}
35.activity-flexbox { /*ホバー時のzoom表示箇所*/
36    padding: 0 10px;
37    overflow:hidden; 
38}
39.activity-image { /*ホバー時のzoom表示箇所*/
40    width: 540px;
41    transition:1s all;
42}
43.activity-flexbox h3 {
44    padding-top: 15px;
45    font-size: 16px;
46    letter-spacing: 5px;
47}
48.activity-image:hover { /*ホバー時のzoom表示箇所*/
49    transform:scale(1.2,1.2);
50    transition:1s all;
51}
52.activity-mark {
53    width: 50px;
54    padding-top: 15px;
55    display: block;
56    text-align: left;
57}
58.mark-space {
59    padding-bottom: 65px;
60}
61

Lhankor_Mhy

2020/12/24 01:47

具体的にどうしたいのか、ご提示ください。

user20

2020/12/24 02:13

説明が不足しておりました。申し訳ございません。質問内容に参考URLを追加いたしました。その中で説明がされているような表示を行いたいです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

activity-flexboxのpaddingを0にしてください。
もしpaddingを保持したまま同様の動作を行いたいならactivity-imageをさらに要素で囲んで、
その要素にoverflow:hiddenを追加してください。

追加zoomサンプル

HTML
1<div class="activity-wrapper">
2        <div class="container">
3            <div class="heading">
4                <h2>ダミーダミーダミー</h2>
5            </div>
6            <div class="activity-flexboxContainer">
7                <div class="activity-flexbox">
8                    <!--ホバー時のzoom表示箇所-->
9                    <figure>
10                        <img class="activity-image" src="ダミーダミーダミー" alt="">
11                    </figure>
12                    <h3>ダミーダミーダミー</h3>
13                    <img class="activity-mark mark-space" src="images/index/activity-mark.svg" alt="">
14                </div>
15                <div class="activity-flexbox">
16                    <figure>
17                        <img class="activity-image" src="ダミーダミーダミー" alt="">
18                    </figure>
19                    <h3>ダミーダミーダミー</h3>
20                    <img class="activity-mark mark-space" src="images/index/activity-mark.svg" alt="">
21                </div>
22                <div class="activity-flexbox">
23                    <figure>
24                        <img class="activity-image" src="ダミーダミーダミー" alt="">
25                    </figure>
26                    <h3>ダミーダミーダミー</h3>
27                    <img class="activity-mark" src="images/index/activity-mark.svg" alt="">
28                </div>
29                <div class="activity-flexbox">
30                    <figure>
31                        <img class="activity-image" src="ダミーダミーダミー" alt="">
32                    </figure>
33                    <h3>ダミーダミーダミー</h3>
34                    <img class="activity-mark" src="images/index/activity-mark.svg" alt="">
35                </div>
36            </div>
37        </div>
38    </div>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5
6html {
7    font-size: 100%;
8}
9
10body {
11    font-family: 'Lora', serif;
12    font-family: 'Noto Serif JP', serif;
13}
14
15a {
16    text-decoration: none;
17}
18
19h2, h3, p {
20    font-weight: normal;
21}
22
23.container {
24    width: 1170px;
25    padding: 0 15px;
26    margin: 0 auto;
27}
28
29.activity-wrapper {
30    background-color: #f7f7f7;
31    padding: 100px 0;
32    text-align: center;
33}
34
35.activity-flexboxContainer {
36    padding-top: 45px;
37    display: flex;
38    flex-wrap: wrap;
39    justify-content: space-between;
40}
41
42.activity-flexbox {
43    /*ホバー時のzoom表示箇所*/
44    padding: 0 10px;
45}
46
47.activity-flexbox figure {
48    overflow: hidden;
49    width: 540px;
50    height: 540px;
51}
52
53.activity-image {
54    /*ホバー時のzoom表示箇所*/
55    width: 100%;
56    height: 100%;
57    transition: 1s all;
58}
59
60.activity-flexbox h3 {
61    padding-top: 15px;
62    font-size: 16px;
63    letter-spacing: 5px;
64}
65
66.activity-image:hover {
67    /*ホバー時のzoom表示箇所*/
68    transform: scale(1.2, 1.2);
69    transition: 1s all;
70}
71
72.activity-mark {
73    width: 50px;
74    padding-top: 15px;
75    display: block;
76    text-align: left;
77}
78
79.mark-space {
80    padding-bottom: 65px;
81}

投稿2020/12/24 02:30

編集2020/12/24 04:16

gogoweb_ikeda

総合スコア1426

user20

2020/12/24 03:03

activity-flexboxのpadding設定を削除し、 activity-flexboxのoverflow:hidden;はそのままとしましたが、画像の下部分が広がるように拡大されます。どの部分を修正すべきか、教えていただけると幸いです。

gogoweb_ikeda

2020/12/24 04:18

高さが指定されていないので下部分の拡大は考慮していません。参考として高さと横幅を540pxにしたコードを追加しました。

user20

2020/12/24 04:48

早速ご対応いただき、ありがとうございます。追加コードを反映させてみましたが、540pxサイズの画像が縦に一つずつ並び、画像のzoomも広がってしまいます。 heightとwidthのサイズを変えても縦に並びます。試しに、activity-flexboxにheightとwidthサイズを設定してみると画像の大きさは設定できましたが、zoom時に画像のサイズ自体が拡大されて表示されてしまいます。 flexboxなどを指定しているせいか、表示がうまくいきません。こちらの知識不足でお手数お掛けし、申し訳ございませんが改めてご回答いただけると幸いです。よろしくお願いします。

gogoweb_ikeda

2020/12/24 05:01

activity-flexbox figure にmargin:0　を追加してみてください。

user20

2020/12/24 05:47

ご指摘の箇所も反映させてみたのですが、どうもうまくいきません。下記にここまででzoomのために追加したcssを記載いたします。 htmlはgogoweb_ikeda様のサンプルの通り、 activity-flexboxのactivity-imageをfigureで挟んだ形となっております。 ---css--- .activity-flexbox { padding: 0 10px; } .active-flexbox figure { overflow:hidden; margin: 0 auto; width: 540px; height: 540px; } .activity-image { width: 100%; height: 100%; transition:1s all; } .activity-image:hover { transform:scale(1.2,1.2); transition:1s all; }

user20

2020/12/24 06:00

追加で、試したことと現状を記載しました。やり方として正しいのかわかりませんが、画像４つをを２つずつ二列で表示させたかったので、その点はactivity-flexboxにwidthを50%指定してとりあえず見た目は整えましたが、ホバー時のzoomが画像サイズをはみ出して表示されてしまう状態となっております。

gogoweb_ikeda

2020/12/24 06:01

.active-flexbox figure これは .activity-flexbox figure ではないのですか？

user20

2020/12/24 06:46

その通りです。入力ミスをしていました。無事、目標の表示画面にできました。何度もご回答いただき、誠にありがとうございました。

行動規範の内容に同意します