東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2015.04.23 Posted by

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

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

 

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

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

 

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

 

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

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

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

 

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

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

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

 

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278