コラム 実用WEBデザイン

1,494views!

投稿日 : 2016年1月18日

【目に留まる】マウスオーバーで画像の見せ方変化

clickaction

こんにちは、イメージデザインの古川です。

バナーや、商品画像は意外とスルーされてしまうことがあります。
そこで、少しでもクリックや見てもえるように、
マウスが乗った時に少しのアクションを付けてあげると 反応がよくなるかもしれません。

そこで、今回はよく使われているものを少し紹介したいと思います。


HTMLとしては画像の場合とし、以下のソースを例としています。

<p><a href="リンク先URL"><img src="画像パス" width="150" height="150"></a></p>

マウスを乗せるというアクションがcssでは:hoverとして指定できるので
:hoverを追加したものに変化後の内容を入れます。


半透明にする

0.6、60となっているのが透過の程度です。
0であれば完全に透明になります。

<style type="text/css">
a:hover img{
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}
</style>

枠線を追加する

枠線が出てくると幅が少し大きくなるので、レイアウト崩れには注意が必要です。

<style type="text/css">
a:hover img{
	border:2px #CC0000 solid;
}
</style>

傾ける

5degとなっている所が角度となります。大きければそれだけ傾きます。

<style type="text/css">
a:hover img{
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
}
</style>

ちょっと動く

topは上からの移動距離 leftは左からの移動距離です。
HTMLでは、基本的には起点が左上なので、この２つを設定します。

<style type="text/css">
a:hover img{
	position:relative;
	top:2px;
	left:2px;
}
</style>

大きくする

こちらも幅、高さが変わるのでレイアウト崩れに注意が必要です。

<style type="text/css">
a:hover img{
	width:200px;
	height:200px;
}
</style>

円にする、または円から四角

※ここからは、古いブラウザでは、対応できないものもあります。

border-radiusが角の丸みで、この値を小さくすれば角丸四角にもできます。

<style type="text/css">
a:hover img{
	border-radius:50%;
}
</style>

こちらは逆に初めを丸く指定しておきます。

<style type="text/css">
a img{
	border-radius:50%;
}
a:hover img{
	border-radius:0%;
}
</style>

アニメーションでの変化

さらにマウスオーバーの変化はアニメーションさせることも可能です。

transitionでアニメの設定（ここでは時間）を設定しています。

<style type="text/css">
a img{
	border-radius:50%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
a:hover img{
	border-radius:0%;
}
</style>

<style type="text/css">
a img{
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
a:hover img{
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}
</style>

<style type="text/css">
a img{
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
a:hover img{
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
}
</style>

番外編

少しやりすぎて画面がうるさいです。

<style type="text/css">
a:hover img{
	-webkit-animation:role 1s infinite;
	animation: role 1s infinite;
}
@-webkit-keyframes role {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@keyframes role {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
</style>

<style type="text/css">
a:hover img{
	-webkit-animation:sway 0.1s infinite;
	animation: sway 0.1s infinite;
}
@-webkit-keyframes sway {
    0% { -webkit-transform: translate(3px, 1px) rotate(0deg); }
    20% { -webkit-transform: translate(-4px, 0px) rotate(1deg); }
    40% { -webkit-transform: translate(2px, -4px) rotate(1deg); }
    60% { -webkit-transform: translate(-4px, 2px) rotate(0deg); }
    80% { -webkit-transform: translate(0px, -4px) rotate(1deg); }
    100% { -webkit-transform: translate(2px, -3px) rotate(-1deg); }
}
@keyframes sway {
    0% { transform: translate(3px, 1px) rotate(0deg); }
    20% { transform: translate(-4px, 0px) rotate(1deg); }
    40% { transform: translate(2px, -4px) rotate(1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    80% { transform: translate(0px, -4px) rotate(1deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}
</style>

種類は色々ありますが、
ボタンを乗せた時に何か変化があれば
それだけで、目に留まってしまいますので、どれかを試してみてはいかがでしょうか。

※追記2016/01/20：アニメーションするものをIE11やFireFoxなどのブラウザに対応させるようにコードを変更しました。

関連記事