拡大されるマウスオーバーをfigureの画像の高さを保ったまま実装したい

Question

前提・実現したいこと

画像のようなことを実現したいです。

ソースコードの変更が必要なのか、どのように変更すればいいのか
●理想のためには高さ？をどのように設定したらよいかわかりませんでした。
ご教示いただければ幸いです。
よろしくお願いいたします。

    <div class="item item01 item-ln">
	  <a href="#">
	    <figure>
           <img src="../../assets/run.jpg" alt="">
	         <figcaption><span style="text-align: center">走る</span></figcaption>
	    </figure>
	  </a>
	</div>

figure{
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	background: #241E21;
}

figure img{
	display: block;
	transition-duration: 0.3s;
}
figure img:hover{
	transform: scale(1.5);
	transition-duration: 0.3s;
	opacity: 0.6;
}

figcaption{
	line-height: 1.5em;
	margin0: 0;
	padding: 0;	
}

.item{
	padding: 0 10px;
	transition-duration: 0.3s;
}

.item:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
}

.item a{
	color: #fff;
}

.item-ln{
	padding-left: 0;
}


.item01{
	border-bottom: solid 5px #0062B6;
	margin-bottom: 5px;
}

Answer 1

適当にラップしてoverflowを設定してみては？

<style>
.wrap{
overflow:hidden;
}
</style>
<figure>
<div class="wrap">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=hoge" alt="hoge">
</div>
<figcaption><span style="text-align: center">走る</span></figcaption>
</figure>

Comments

[renmo]

ご教示いただきありがとうございました！
柔軟性に欠けておりました。
無事解決いたしました。本当にありがとうございます

[renmo]

ご教示いただきありがとうございました。
柔軟性に欠けておりました。
無事解決いたしました。本当にありがとうございました。