[CSS]画像のマウスオーバー時にtransformで拡大縮小表示する

CSS

2016.01.12

マウスオーバーした画像をCSS3のtransformで拡大縮小表示させる方法のご紹介です。

ブロック要素固定時の画像の拡大縮小

CSSの記述例は以下の通りです。

.sample {
    width: 640px;
    height: 480px;
    overflow: hidden;
}
.sample img {
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -moz-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.sample img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

.sample {

width: 640px;

height: 480px;

overflow: hidden;

}

.sample img {

-webkit-transition: -webkit-transform 0.5s linear;

-moz-transition: -moz-transform 0.5s linear;

-o-transition: -o-transform 0.5s linear;

-ms-transition: -ms-transform 0.5s linear;

transition: transform 0.5s linear;

}

.sample img:hover {

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

-ms-transform: scale(1.5);

transform: scale(1.5);

}

.sampleという名前の要素に幅と高さに加え、overflow:hiddenを指定します。
次に、transition: transform 0.5s linearでマウスオーバー時の画像の拡大縮小速度を指定します。
また、transform: scale(1.5)で拡大縮小の倍率を指定します。

※0.5sや1.5の数字はご利用のサイトに合わせて変えてみてください。

HTMLはこのような感じです。

<div class="sample">
    <img src="./img/transform.jpg">
</div>

</div>

↓画像にマウスを乗せると、拡大表示されるようになります。