リンク画像をにゅっと拡大

最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α

<div class=”imgWrap”>

画像のタグ

</div>

CSSは
 

.imgWrap {

overflow: hidden; /*拡大時にはみ出た部分を隠す*/

width: 320px; /*画像の幅*/

height: 180px; /*画像の高さ*/

}

.imgWrap img {

display: block;

transition-duration: 0.3s; /*変化に掛かる時間*/

}

.imgWrap img:hover {

transform: scale(1.1); /*画像の拡大率*/

transition-duration: 0.3s; /*変化に掛かる時間*/

}