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

2015.04.23　Posted by Coding_team

Webプログラミング

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

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

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

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

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

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

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; 
}

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では効果が失われてしまいますが、それによって表示に崩れが発生するという事はありません。

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

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

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

ノーコードツールとは？Web制作の新常識と活用事例について徹底解説！

2024.08.23

h1やh2の正しい使い方とは？hタグのルールと使い方を解説

2024.06.24

PCのGoogle検索結果画面にファビコンが再出現！改めてアイコンの設定を見直そう

2023.04.11