CSSで画像にマウスオーバー時マスクと画像拡大を実現したい。

Question

画像にマウスオーバーした際、画像は少し拡大・上に半透明マスクをかけて文字を表示、と言うのを実現したいです。

それぞれ単体では実現できたのですが、合わせると動きません。
参考にしたのは以下のサイトです。

https://blog.raizzenet.com/mouse-hover-caption-effects-in-css/#i-sample1
https://www.jungleocean.com/programming/190208mouseoverimg#outline__2

これを踏まえて以下のようにしました。

<section class="item_con">
  <div class="item_box"> <img src="images/cat01.jpg" alt=""/>
    <div class="mask">
      <div class="caption"><span>type.1</span><br>
        type.1の説明文をここに掲載します。</div>
    </div>
  </div>
～～
</section>

.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などを利用しないと実現できませんか?

Answer 1

これでできます。

.item_box:hover img {
    transform:scale(1.2,1.2);
}
```**動くサンプル：**[https://jsfiddle.net/p8a359ds/](https://jsfiddle.net/p8a359ds/)

Comments

[beginner25487]

素早い回答ありがとうございました!
無事希望通りに表示しました。