css PR

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

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

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

私はずっと前からバナーなどの画像に、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からのアニメーションで、色々なブラウザに対応しているため使いやすいスタイルです。一度、設定するだけなので試してみてください。

この記事を書いた人
ゆうき
デザインに携わり早22年、Web関連を中心にSEOやマーケティングなど色々と語っています。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です