CSSの小技 その8
今回は「CSSで出来るマウスオーバーエフェクト」です。
マウスカーソルを乗せた時（主に画像）の演出についてCSSのみでいろいろと出来ます。
当ブログのトップページでは画像に対してズームがかかるエフェクトを導入しています。
ズームイン/ズームアウト
transform: scale()を使って画像の大きさを変更し、ズームエフェクトにします。
マウスオーバー時にアニメーションをして画像をズームさせます。
transform: scale()の数値を調整することでズームイン、アウトの使い分けができます。
HTML
|
1 2 3 4 5 6 7 |
<div class="zoomin"> <img src="common/images/test.png" alt="zoomin"> </div> <div class="zoomout"> <img src="common/images/test.png" alt="zoomout"> </div> |
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 |
div.zoomin { margin: 30px; width: 200px; height: 150px; overflow: hidden;/* 画像をズームした場合のはみ出た部分を非表示 */ } div.zoomin img { transform: scale(1);/* マウスを乗せていない時は大きさ比率を1にする */ -webkit-transform: scale(1); } div.zoomin img:hover { transform: scale(1.1);/* マウスを乗せた時に比率1.1にする。 */ -webkit-transform: scale(1.1); transition: 0.2s;/* 0.2秒をかけて大きくなるアニメーション */ -webkit-transition: 0.2s; } div.zoomout { margin: 30px; width: 200px; height: 150px; overflow: hidden;/* 画像をズームした場合のはみ出た部分を非表示 */ } div.zoomout img { transform: scale(1.1);/* マウスを乗せていない時は大きさ比率を1.1にする */ -webkit-transform: scale(1.1); } div.zoomout img:hover { transform: scale(1);/* マウスを乗せた時に比率1にする。 */ -webkit-transform: scale(1); transition: 0.2s;/* 0.2秒をかけて小さくなるアニメーション */ -webkit-transition: 0.2s; } |
明るくする（半透明にする）
お次は、opacityを利用して、マウスを乗せた時に画像を半透明にして、
白い背景を透かせることで画像が明るくなったように見せます。
このエフェクトは良く見かけるものです。
背景の黒いサイトでは黒が透けて逆に暗くなってしまいますので、
その場合は画像と同サイズの白い背景を置きます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="opacity1"> <img src="common/images/test.png" alt="opacity1"> </div> <div class="wrapper"> <div class="opacity1"> <img src="common/images/test.png" alt="opacity1"> </div> <div class="opacity2"> <img src="common/images/test.png" alt="opacity2"> </div> </div> |
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 |
div.opacity1 { margin: 30px; width: 200px; height: 150px; } div.opacity1 img { } div.opacity1 img:hover { opacity: 0.5;/* 透過率50% */ transition: 0.2s;/* 0.2秒アニメーション */ -webkit-transition: 0.2s; } div.wrapper { background: #000000; /* 黒背景 */ width: 100%; padding: 30px 0; } div.opacity2 { background: #FFFFFF;/* 画像と同サイズの白背景 */ margin: 30px; width: 200px; height: 150px; } div.opacity2 img { } div.opacity2 img:hover { opacity: 0.5;/* 透過率50% */ transition: 0.2s;/* 0.2秒アニメーション */ -webkit-transition: 0.2s; } |
白黒画像、セピア画像、ブラー
filter: grayscale()を利用して白黒画像に、またfilter: sepia()を利用してセピア画像にすることができます。
それからfilter: blur()を利用してブラー（ぼかし）の画像にすることもできます。
この3つの効果についてはIEでは効果が無いようで、FirefoxやGoogleChromeでは表示されました。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="gray"> <img src="common/images/test.png" alt="gray"> </div> <div class="sepia"> <img src="common/images/test.png" alt="sepia"> </div> <div class="blur"> <img src="common/images/test.png" alt="blur"> </div> |
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 |
div.gray { margin: 30px; width: 200px; height: 150px; } div.gray img { filter: grayscale(100%); -webkit-filter: grayscale(100%); transition: 0.2s; -webkit-transition: 0.2s; } div.gray img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); } div.sepia { margin: 30px; width: 200px; height: 150px; } div.sepia img { filter: sepia(100%); -webkit-filter: sepia(100%); transition: 0.2s; -webkit-transition: 0.2s; } div.sepia img:hover { filter: sepia(0); -webkit-filter: sepia(0); } div.blur { margin: 30px; width: 200px; height: 150px; overflow: hidden;/* ぼかしが外側へ広がるのではみ出る部分を非表示 */ } div.blur img { filter: blur(5px); -webkit-filter: blur(5px); transition: 0.2s; -webkit-transition: 0.2s; } div.blur img:hover { filter: blur(0); -webkit-filter: blur(0); } |
他にも
他にも、画像を回転させたり、ピカっと光る演出を入れたりすることもできるようですし、いくつかのエフェクトを複合することもできます。
ズームや半透明はよく使いますが、白黒画像、セピア画像、ぼかし画像は今後使っていきたいと思いました。
また、もう少し調べてみようと思いますが、IEでも問題なく使えれば、白黒画像、セピア画像はマウスオーバーに限らず画像をおしゃれに見せる演出として使えそうです。
参考にさせていただいたサイト
NxWorld様 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 http://www.nxworld.net/tips/css-image-hover-effects.html
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
