画像をマウスオーバーした際に画像を拡大・縮小させるエフェクトはCSSで簡単に実装することができます。要素の拡大・縮小に使うのはtransformプロパティです。/*カーソルをポインターにする*/}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の中に画像が入っている状態で、さっきと同じように画像を拡大。ボックスと画像が同じ幅・高さなら、画像を拡大するとボックスからはみ出てしまいますが、overflowプロパティでhiddenを指定することで、画像を拡大した時にはみ出た部分を隠すことができます。どちらかというこちらのパターンの方が使う機会がありそうですね。工夫次第では、画像を拡大させるだけでなく、暗くしたり文字を表示させたり、様々なホバーエフェクトをかけることができると思います。*Website次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。KUBOGENサイトマップ。