マウスホバー時に画像を拡大・縮小するエフェクトはCSSのみで実現可能です。

 

 

以下に画像を拡大・縮小する時のサンプルを紹介します。

 

拡大エフェクトをかける

 

HTML

 

CSS

 

ブロックの中で拡大エフェクトかける

 

HTML

 

CSS

 

縮小エフェクトかける

 

HTML

 

CSS

 

ブロックの中で縮小エフェクトかける

 

HTML

 

CSS

 

応用:拡大しつつマスクをかけたようなエフェクトを実現する

 

HTML

 

CSS

 

 

おすすめの記事