最も使われているのは多分「透過」ですよね。その次に「画像の切り替え」でしょうか。
この記事ではcssのみのロールオーバーの表現をいくつかまとめておきます。
■cssのみの画像のロールオーバーの表現
全て「img」や「a:hover img」やその他数値などは任意で変更してご利用下さい。
- 画像を透過
123456a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter: “alpha( opacity=70 )”;-moz-opacity:0.7;}
- 画像の枠色を変化
1234567a img {border: 4px outset #808080;}a:hover img {border: 4px outset #FF6E6E;}
- 画像をずらす
12345a:hover img {position:relative;top:2px;left:2px;}
- 画像をゆっくり透過
12345678img {transition: 0.5s;}a:hover img {opacity: 0.7;transition: 0.7s;}
- 画像を回転させる
123456789img {transition: 0.5s;}a:hover img {-moz-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-o-transform: rotateY(180deg);-ms-transform: rotateY(180deg);}
いつも私は透過ばっかりだったので、もうこういう所にも気を配っていきたいところですね。
今回は普通に表示する画像のロールオーバーの表現でしたが、ボタンやテキストなどになるとまた変わってくると思います。
何か質問、誤情報、誤字などがあればコメントでお願いします。