画像をマウスオーバーした際に画像を拡大・縮小させるエフェクトはCSSで簡単に実装することができます。
要素の拡大・縮小に使うのはtransformプロパティです。
画像を拡大させる方法
<img src=”画像ファイルを指定” class=”scale-img”>
.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縮小されます。
ボックス内で画像を拡大させる方法
さっきは単に画像を拡大させただけですが、ボックス内で画像を拡大させ、はみ出た部分は隠れるように実装した例です。
<div class=”scale-box”>
<img src=”画像ファイルを指定” class=”scale-img”>
</div>
.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