【css】画像のロールオーバーの表現

Pocket

最も使われているのは多分「透過」ですよね。その次に「画像の切り替え」でしょうか。
この記事ではcssのみのロールオーバーの表現をいくつかまとめておきます。

スポンサーリンク

■cssのみの画像のロールオーバーの表現

全て「img」や「a:hover img」やその他数値などは任意で変更してご利用下さい。

cssロールオーバー表現のss

デモはこちら

  1. 画像を透過

  2. 画像の枠色を変化

  3. 画像をずらす

  4. 画像をゆっくり透過

  5. 画像を回転させる

いつも私は透過ばっかりだったので、もうこういう所にも気を配っていきたいところですね。
今回は普通に表示する画像のロールオーバーの表現でしたが、ボタンやテキストなどになるとまた変わってくると思います。


何か質問、誤情報、誤字などがあればコメントでお願いします。

Pocket