hover時に画像が勝手に大きくなる

#問題点
写真をホバーすると、勝手に大きくなります。
#試したこと

開発者ツールを確認した。transformはなかった。
transformだと仮定して、transform: none;にした。

HTML
1<!DOCTYPE html>
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <link rel="stylesheet" type="text/css" href="style.css">
6    <meta charset="utf-8">
7    <title></title>
8  </head>
9  <body>
10    <div class="intro-wrapper">
11      <div class="intro-inner">
12        <h2>Sample theme #2</h2>
13        <p>THis is a sample WordPress theme for beginners.Check it out!</p>
14      </div>
15    </div>
16
17    <div class="photos">
18      <h3 class="text-center">Photo</h3>
19      <div class="pictures row clearfix">
20        <a class="col-4" href="#"><img src="img/aomori.jpg" alt="Loading_page"></a>
21        <a class="col-4" href="#"><img src="img/fukushima.jpg" alt="Loading_page"></a>
22        <a class="col-4" href="#"><img src="img/okinawa.jpg" alt="Loading_page"></a>
23        <a class="col-4" href="#"><img src="img/saga-_Okusu__in_Takeo-s.jpg" alt="Loading_page"></a>
24        <a class="col-4" href="#"><img src="img/shizuoka-Sand_Dunes_at_Nakatajima-s.jpg" alt="Loading_page"></a>
25        <a class="col-4" href="#"><img src="img/yamagata-Ginzan_Onsen-s.jpg" alt="Loading_page"></a>
26      </div>
27    </div>
28
29  </body>
30</html>
31

css
1* , *::before , *::after {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7}
8
9/* --------------------------------
10 * イントロセクションCSS（Lesson1）
11 * -------------------------------- */
12
13.intro-wrapper {
14  height: 300px;
15  max-width: 1300px;
16  margin: 0 auto;
17  background-color: #fff;
18  position: relative;
19  top: 80px;
20  padding: 10px 0px 0px 25px;
21}
22
23.intro-inner {
24  width: 80%;
25}
26
27.intro-inner h2 {
28  font-size: 2.0rem;
29  display: block;
30}
31
32/* --------------------------------
33 * ギャラリーセクションCSS(Lesson2)
34 * -------------------------------- */
35img {
36  vertical-align: top;
37  transform: none;
38}
39
40a {
41  margin: 0;
42  text-decoration: none;
43}
44
45.photos h3 {
46}
47
48.row {
49  max-width: 1245px;
50  margin: 0 auto;
51}
52
53.clearfix::after {
54  content: "";
55  display: block;
56  clear: both;
57}
58
59.pictures img {
60  width: 100%;
61  height: 300px;
62  transition: all 0.3s ease-out;
63}
64
65.col-4 {
66  width: 33.3%;
67  float: left;
68}
69
70.text-center {
71  text-align: center;
72}
73
74.pictures a:hover img {
75  opacity: 0.5;
76}
77

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

回答1件

ベストアンサー

CSS
1.intro-wrapper {
2z-index: 1;
3}

これを追加すると治ります。

こうなった原因複数あります。
まず一つ目は.intro-wrapperと.photosの中の.picturesが重なっていることが原因です。画像が大きくなっているように見えますが、第一にこれが誤解です。上の3枚の画像の上から10~20pxくらいが.intro-wrapperの背面に隠れてしまっています。hoverすると隠れた部分が見えてしまっているだけです。

二つ目の理由がStacking contextというものが関わります。Stacking contextを説明するのは難儀なので簡単に説明させていただきますが、opacity（1未満）が加わると重なりの条件が変わります。hoverによってopacityが加わったことによって重なりの条件が変化し、前面背面の位置関係が変わって.picturesが.intro-wrapperより手前に来たために隠れていた部分が表示されました。

この2つの理由から前面に来てほしい .intro-wrapper のz-index値をデフォルトの0から1に上げました。

そもそもの重なりを無くす方がいいと思いますので以下のコードでもいいと思います。

CSS
1.intro-wrapper {
2top: 0;
3padding-top: 80px;
4}
5
6.photos h3 {
7height: 0;
8overflow: hidden;
9}

<h3 class="text-center">Photo</h3> この部分は意図的に見えないようにしているんですよね。

投稿2019/04/22 11:14

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

hover時に画像が勝手に大きくなる

関連した質問