質問: 画像にマウスオーバーした際、画像は少し拡大・上に半透明マスクをかけて文字を表示、と言うのを実現したいです。 それぞれ単体では実現できたのですが、合わせると動きません。 参考にしたのは以下のサイトです。 https://blog.raizzenet.com/mouse-hover-caption-effects-in-css/#i-sample1 https://www.jungleocean.com/programming/190208mouseoverimg#outline__2 これを踏まえて以下のようにしました。 ``` type.1 type.1の説明文をここに掲載します。 ~~ ``` ``` .item_con { overflow: hidden; } .item_box { float: left; width: 50%; margin: 0; padding: 0; overflow: hidden; position: relative; /* 相対位置指定 */ overflow:hidden; } .item_box img { width: 100%; height: auto; display: block; transition: 0.6s; } .item_box img:hover { transform:scale(1.2,1.2); } /*マスク*/ .item_box .mask { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.2); /* マスクは半透明 */ -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .item_box:hover .mask { opacity: 1; /* マスクを表示する */ } /*文字列BOX*/ .item_box .caption { color: #fff; font-size: 1.2em; line-height:1.2em; text-align:center; position: absolute; top: 50%; /*親要素を起点に上から50%*/ left: 50%; /*親要素を起点に左から50%*/ transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/ -webkit-transform: translateY(-50%) translateX(-50%); } ``` 画像サイズは、参考サイトでは固定でしたがレスポンシブで画面幅50%としています。 この状態で、マスクはかかって文字表示もするのですが画像の拡大表示が動作しません。 cssのみで両方を動作させるのは難しいのでしょうか? jQueryなどを利用しないと実現できませんか?
回答: これでできます。 ``` .item_box:hover img { transform:scale(1.2,1.2); } ``` **動くサンプル:**