CSS3で画像にマウスオーバーした時に効果をつける

こんにちは、ウェブラボ技術メモ第11回目です。

今回はcss3を使って、画像に少し効果をつけてみたいと思います。

 

今回使うのはhtmlとcssだけです。

まずはhtmlに画像ファイルを一つ記述します。

 

imgの後にspanがついていますが、これも効果を与えるのに必要なので記述します。

 

続いてcssを書いていきます

少し長いですが、この記述でマウスオーバー時に画像を縮小し、キラリと光らせたいと思います。

作成されたデモ画面はこちら

 

いかがでしょうか。少し目立たせたい画像やボタンなどに使うと気持ちのよい動きで、効果的だと思います。

今回使ったのはCSS3で、transitionなどはIE10からの対応になりますので旧バージョンのIEでは効果が失われてしまいますが、それによって表示に崩れが発生するという事はありません。

あくまで効果であり、無いと困るというようなものでもありませんので、気軽に使用してみても良いかと思います。

 

以上、今月の技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。