マウスホバーで画像サイズを大きく（小さく）する

CSS3のtransitionプロパティとtransformプロパティを使う方法

transitionプロパティとtransformプロパティを使ってマウスホバー時に画像が大きくなるようにします。transitionで動きをつけて、transformで画像の大きさを指定しています。widthで画像サイズを変えるより動きがスムーズに見えます。

実装

<div class="scalingImg">
<img src="../images/image01s.jpg" alt="" />
</div>

.scalingImg img{   
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}
.scalingImg img:hover {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}