【CSS備忘録】リンク画像をにゅっと拡大

簡単にちょっとおしゃれなリンク画像
カーソルが重なった時ににゅっと拡大させる

HTML

<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; /*変化に掛かる時間*/

}

これでOK　超簡単！