CSS3で画像にマウスオーバーした時に効果をつける
2015.04.23 Posted by Coding_team
こんにちは、ウェブラボ技術メモ第11回目です。
今回はcss3を使って、画像に少し効果をつけてみたいと思います。
今回使うのはhtmlとcssだけです。
まずはhtmlに画像ファイルを一つ記述します。
imgの後にspanがついていますが、これも効果を与えるのに必要なので記述します。
続いてcssを書いていきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
a { position: relative; display: block; width: 300px; height: 200px; background: #ff0000; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; /* 下のものをまとめる事も可能 全てのプロパティを0.3秒で開始と完了を滑らかに変化させる */ } a:hover { opacity:0.7; -webkit-transform: scale(0.98,0.98); -moz-transform: scale(0.98,0.98); -o-transform: scale(0.98,0.98); transform: scale(0.98,0.98); /* 要素を拡大縮小する この場合はX方向（横）、Y方向（縦）に98%に縮小 */ } a span { opacity: 0; display: block; width: 100px; height: 500px; /* 画像のサイズに合わせて少し大きめに作る */ position: absolute; top: -100px; left: -200px; /* 画像のサイズに合わせて位置を外側から外側へ */ background: rgba(255, 255, 255, 0.3); -webkit-transition-property: left, top, opacity; -moz-transition-property: left, top, opacity; -ms-transition-property: left, top, opacity; -o-transition-property: left, top, opacity; transition-property: left, top, opacity; /* a spanのcssプロパティ left,top,opacityを時間的変化させる */ -webkit-transition-duration: 0.7s, 0.5s, 0.1s; -moz-transition-duration: 0.7s, 0.5s, 0.1s; -ms-transition-duration: 0.7s, 0.5s, 0.1s; -o-transition-duration: 0.7s, 0.5s, 0.1s; transition-duration: 0.7s, 0.5s, 0.1s; /* 変化にかかる時間を指定 上のプロパティに対応している*/ -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; /* 変化のタイミング・進行割合を指定 easeの場合は開始と完了を滑らかにする */ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); /* 要素を回転表示 この場合は30度回転させる */ } a:hover span { /* マウスオーバーした時の光の位置 */ opacity: 1; top: -50px; left: 630px; } |
少し長いですが、この記述でマウスオーバー時に画像を縮小し、キラリと光らせたいと思います。
作成されたデモ画面はこちら
いかがでしょうか。少し目立たせたい画像やボタンなどに使うと気持ちのよい動きで、効果的だと思います。
今回使ったのはCSS3で、transitionなどはIE10からの対応になりますので旧バージョンのIEでは効果が失われてしまいますが、それによって表示に崩れが発生するという事はありません。
あくまで効果であり、無いと困るというようなものでもありませんので、気軽に使用してみても良いかと思います。
以上、今月の技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
