[CSS]画像のマウスオーバー時にtransformで拡大縮小表示する｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

マウスオーバーした画像を、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>

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

スポンサード