プログラミング

マウスオーバー時に画像を拡大・縮小させるエフェクト【CSS】

画像をマウスオーバーした際に画像を拡大・縮小させるエフェクトはCSSで簡単に実装することができます。

要素の拡大・縮小に使うのはtransformプロパティです。

画像を拡大させる方法

ミロのヴィーナス

HTML
<img src=”画像ファイルを指定” class=”scale-img”>
CSS
.scale-img {
 width: 250px; /*画像の幅*/
 height: 175px; /*画像の高さ*/
 transition-duration: 0.5s; /*変化の時間*/
}
.scale-img:hover {
 transform: scale(1.2,1.2); /*画像の拡大*/
 cursor: pointer; /*カーソルをポインターにする*/
}

transformプロパティでscale()を指定しています。

scale()を指定すると、対象の要素はx軸、y軸方向に拡大・縮小します。

この場合だとx軸方向とy軸方向に1.2倍拡大するという意味です。

transition-durationプロパティを指定しているのは、要素が拡大したり縮小したりするときの変化を滑らかにするため。0.5sを指定することで、要素の変化に0.5秒かかるようにしており、これを指定しないとカクカクした動きになってしまいます。

画像を縮小させることもできる

ミロのヴィーナス

scaleの値を1よりも小さくすれば、画像を縮小させることができます。

上の画像では、scale(0.5,0.5)を指定しており、マウスオーバー時に画像が1/2縮小されます。

ボックス内で画像を拡大させる方法

さっきは単に画像を拡大させただけですが、ボックス内で画像を拡大させ、はみ出た部分は隠れるように実装した例です。

ミロのヴィーナス
HTML
<div class=”scale-box”>
 <img src=”画像ファイルを指定” class=”scale-img”>
</div>
CSS
.scale-img {
 width: 250px; /*画像の幅*/
 height: 175px; /*画像の高さ*/
 transition-duration: 0.5s; /*変化の時間*/
}
.scale-img:hover {
 transform: scale(1.2,1.2); /*画像の拡大*/
 cursor: pointer; /*カーソルをポインターにする*/
}
.scale-box {
 width: 250px; /*ボックスの幅*/
 height: 175px; /*ボックスの高さ*/
 overflow: hidden; /*画像拡大時にはみ出た部分を隠す*/
}

まずdivの中に画像が入っている状態で、さっきと同じように画像を拡大。

ボックスと画像が同じ幅・高さなら、画像を拡大するとボックスからはみ出てしまいますが、overflowプロパティでhiddenを指定することで、画像を拡大した時にはみ出た部分を隠すことができます。

どちらかというこちらのパターンの方が使う機会がありそうですね。

工夫次第では、画像を拡大させるだけでなく、暗くしたり文字を表示させたり、様々なホバーエフェクトをかけることができると思います。

関連記事
transformは平面空間で要素を変形できる【CSS】
transition-durationでトランジション完了までの時間を指定【CSS】
overflowでボックスからはみ出た内容の表示方法を指定【CSS】

Leave a Comment