こんにちは、イメージデザインの古川です。
バナーや、商品画像は意外とスルーされてしまうことがあります。
そこで、少しでもクリックや見てもえるように、
マウスが乗った時に少しのアクションを付けてあげると
反応がよくなるかもしれません。
そこで、今回はよく使われているものを少し紹介したいと思います。
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では、基本的には起点が左上なので、この2つを設定します。
<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などのブラウザに対応させるようにコードを変更しました。