Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

【CSS】CSSで出来るマウスオーバーエフェクト

CSSの小技 その8
今回は「CSSで出来るマウスオーバーエフェクト」です。
マウスカーソルを乗せた時(主に画像)の演出についてCSSのみでいろいろと出来ます。
当ブログのトップページでは画像に対してズームがかかるエフェクトを導入しています。

ズームイン/ズームアウト

hover01

transform: scale()を使って画像の大きさを変更し、ズームエフェクトにします。
マウスオーバー時にアニメーションをして画像をズームさせます。
transform: scale()の数値を調整することでズームイン、アウトの使い分けができます。

HTML

CSS

明るくする(半透明にする)

hover02

お次は、opacityを利用して、マウスを乗せた時に画像を半透明にして、
白い背景を透かせることで画像が明るくなったように見せます。
このエフェクトは良く見かけるものです。
背景の黒いサイトでは黒が透けて逆に暗くなってしまいますので、
その場合は画像と同サイズの白い背景を置きます。

HTML

CSS

白黒画像、セピア画像、ブラー

hover03

filter: grayscale()を利用して白黒画像に、またfilter: sepia()を利用してセピア画像にすることができます。
それからfilter: blur()を利用してブラー(ぼかし)の画像にすることもできます。
この3つの効果についてはIEでは効果が無いようで、FirefoxやGoogleChromeでは表示されました。

HTML

CSS

他にも

他にも、画像を回転させたり、ピカっと光る演出を入れたりすることもできるようですし、いくつかのエフェクトを複合することもできます。
ズームや半透明はよく使いますが、白黒画像、セピア画像、ぼかし画像は今後使っていきたいと思いました。

また、もう少し調べてみようと思いますが、IEでも問題なく使えれば、白黒画像、セピア画像はマウスオーバーに限らず画像をおしゃれに見せる演出として使えそうです。

参考にさせていただいたサイト
NxWorld様 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 http://www.nxworld.net/tips/css-image-hover-effects.html