読者です 読者をやめる 読者になる 読者になる

webproduct-lab

WEB制作を中心にSEOやマーケティングなど色々と語ります

バナーなどの画像ロールオーバー時のアクションを楽にする!

ユーザビリティを考慮して画像リンクのロールオーバーに何らかのアクションがあるとわかりやすいフィルターに関してですが、色々な方法がある中、みなさんは何を選んでますか?

私はずっと前からバナーなどの画像に、cssのクラス名を指定するだけでエフェクトがかかるスクリプトを使用していましたが、リンク付きの画像には自動でフィルタしてくれた方が楽じゃないですか?

それがcssだけでできちゃうのがこちらです!しかもフェード付き!
クリック率も期待できますよ。

cssで作るホバーエフェクト

.fade {
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
.fade:hover {
    opacity: 0.4;
    filter: alpha(opacity=60);
}

f:id:yuki53:20150129232440g:plain

画像リンク全てにエフェクトを付けたい場合は、cssの指定をa img〜で何も考えることなくホバーした際にフェード透過してくれます。

a img {
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
img a:hover {
    opacity: 0.4;
    filter: alpha(opacity=60);
} 

まとめ

Transitionsはcss3からのアニメーションで、色々なブラウザに対応しているため使いやすいスタイルです。一度、設定するだけなので試してみてください。

Copyright © webproduct-lab ALL RIGHTS RESERVED.