Q&A
↓この質問との違いは何ですか？
https://teratail.com/questions/312108
画像を３行３列計９個並べるのですが、
画像をホバーした際、画像サイズからはみ出さないように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
先ほどは、ご回答いただき誠にありがとうございました。
同じ変化を加えたいのですが、
今回適用する箇所では、グリッドレイアウトを使用したためか
同じようにcssコードを記入してもうまくいかなかったために
質問させていただきました。
追加で失礼します。
質問欄に添付したコードは、先ほどLhankor Mhy様にご回答いただいた
https://teratail.com/questions/312108の時のように試してみましたが、
画像が拡大してzoomされてしまい、うまく対応させることが出来ませんでした。
お手数おかけしますが、
教えていただけると幸いです。
zoomという言葉に(他人に通じない)特殊な意味を持たせていませんかね。
zoomという英単語には、「画像サイズを変えないまま、画像の一部を拡大する」という意味はありません。あなたが参考にしたWebページにも、「枠内でズーム」「300px内でzoom」「zoomした時にはみ出た部分を非表示」などの表現で、ズーム自体に「画像サイズを変えない」という意味がないことは明らかです。
他の方も言う通り
「画像をホバーした際、画像サイズからはみ出さないようにzoomしたい」
「画像が拡大表示される現状です。」
が曖昧で伝わってないようです。
画像サイズから”何”がはみ出さないように”何”をzoomしたいのでしょうか？
拡大表示される現状、というのももう少し詳しく書いていただけると回答できるかもしれません。
あなたの回答
tips
プレビュー
