html&css overflow: hiddenが上しか効かない

実現したいこと

HTMLとCSSを使ってサイトを作っています。画像をホバーした時に拡大してはみ出した部分を隠したいです。

問題

以下のように入力したのですが上のはみ出した部分だけが隠され左右下が隠されません。
overflow-x と -y も試しましたが、できませんでした。

該当のソースコード

html
1<div class="item">
2      <li><a href="#"><img src="02.jpg" alt=""></a></li>
3      <li><a href="#"><img src="03.jpg" alt=""></a></li>
4      <li><a href="#"><img src="04.jpg" alt=""></a></li>
5    </div>

css
1.item li {
2  display: inline;
3}
4.item img {
5  width: 32%;
6  margin: 0px 0.5%;
7  transition-duration: 0.3s;
8  margin-bottom: 50px;
9  overflow: hidden;
10}
11.item img:hover {
12  transform: scale(1.05);
13  opacity: 0.8;
14  transition-duration: 0.3s;
15}
16.item {
17  overflow: hidden;
18  margin: 0px 17%;
19  margin-top: 50px;
20  display: block;
21  position: relative;
22}

試したこと

「overflow hidden」や「overflow hiden 効かない」などと検索をかけたのですが解決できなかったので質問させていただきます。

補足情報

エディターはATOMを使用しています。

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

回答2件

.item に overflow: hidden; を設定した場合、.item の範囲をはみ出した部分が非表示になるだけです。

.item li に適切なサイズを指定して、overflow: hidden; を設定してください。
ただし display: inline; ではサイズが設定できませんので、display: inline-block;にするか、親要素にdisplay: flex; を設定して横並びにするかしてください。

投稿2020/05/04 05:06

hatena19

総合スコア33699

ベストアンサー

いろいろ直さなければならないです。以下、試してみてください。

CSS
1.item li {
2  /* display: inline; */
3  display: block;
4  width: 32%;
5  overflow: hidden;
6}
7.item img {
8  /* width: 32%; */
9  width: 100%;
10  margin: 0px 0.5%;
11  transition-duration: 0.3s;
12  margin-bottom: 50px;
13  /* overflow: hidden; */
14}
15/*
16.item img:hover {
17  transform: scale(1.05);
18  opacity: 0.8;
19  transition-duration: 0.3s;
20}
21*/
22.item {
23  /* overflow: hidden; */
24  margin: 0px 17%;
25  margin-top: 50px;
26  /* display: block; */
27  
28  /* 追加 */
29  display: flex;
30  justify-content: space-between;
31  position: relative;
32}
33
34/* 追加 */
35.item li a:hover img {
36  transform: scale(1.05);
37  opacity: 0.8;
38  transition-duration: 0.3s;
39}