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

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

私はずっと前からバナーなどの画像に、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);
}

画像リンク全てにエフェクトを付けたい場合は、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からのアニメーションで、色々なブラウザに対応しているため使いやすいスタイルです。一度、設定するだけなので試してみてください。