マウスオーバーで画像に効果を入れるCSSの改良

解決済

質問者：litton101
質問日時：2021/10/19 18:43
回答数：1件

以下でサンプル１のようにすると、文字に影がかかってしまうので、
サンプル２のように配置したらとてもいい感じなのですが、画像下辺の影が隠れてしまいます
（1.pngに実際に何かの画像を当てていただければ申し上げている現象をご理解いただけると思いますが）
サンプル２の配置でも、影がプイっと上に動いた画像にきれいに（右辺、下辺に）ドロップシャドウ
されるようにできませんか。

<html>
<head>
<style type="text/css">

/* https://cotodama.co/css_mouseover_img/から借用 */
.img_wrap{
border: 0px solid #fff;
width: 100px;
height: 100px;
margin: 20px auto 0;
transition-duration: 0.5s;
}
.img_wrap:hover{
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
transform: translateY(-10px);
transition-duration: 0.1s;
}
</style>
</head>
<body>

<div class="img_wrap"><label><img src="./1.png" width="100" height="100"><br><input type="checkbox" value="1" name="a">サンプル１</label></div>
<br><br><br><br>
<div class="img_wrap"><label><input type="checkbox" value="1" name="a">サンプル２<br><img src="./1.png" width="100" height="100"></label></div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/10/19 19:08

こんばんは

キャプションと画像を併せてひとつのパネルのように動かしたいのか、あるいは、画像だけに効果を付けたいのか意図がわかりかねます。
そのため、現状はご質問のようなやや中途半端な状態になっているのではないでしょうか？

◇キャプションと画像を一体にしたい場合
.img_wraのCSSの
　height: 100px;
をコメントアウトしてしまえば、HTML通りにDIV全体でひとつの動きになります。（現状はoverflowを起こしていますので）

◇画像だけに効果をつけたけい場合
.img_wrap:hoverのセレクタ部分を、.img_wrap img:hover に変えれば画像だけの効果となります。
ただし、こちらの場合は、「サンプル２」では効果時に画像が文字にかかるようになります。
もしそれが嫌なら、文字と画像の間にあらかじめ margin等でスペースを確保しておくようにすれば宜しいでしょう。

- 0
- 件

通報する

この回答へのお礼

fujillinさん、早速のご回答ありがとうございました。
質問の意図がわかりにくく失礼いたしました。
結論的には、

＞　height: 100px;
＞をコメントアウトしてしまえば、HTML通りにDIV全体でひとつの動きになります。

こちらで希望の動作が得られました、ありがとうございます！！

ご回答後半も非常に参考になりました、次回も使えそうです。
重ねて御礼申し上げます。

通報する

お礼日時：2021/10/19 19:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！