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

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

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

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

画像を透過

a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: “alpha( opacity=70 )”;
	-moz-opacity:0.7;
}

画像の枠色を変化

a img {
    border: 4px outset #808080;
}

a:hover img {
    border: 4px outset #FF6E6E;
}

画像をずらす

a:hover img {
position:relative;
top:2px;
left:2px;
}

画像をゆっくり透過

img {
  transition: 0.5s;
}

a:hover img {
  opacity: 0.7;
  transition: 0.7s;
}

画像を回転させる

img {
  transition: 0.5s;
}
a:hover img {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}

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

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

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

最近の投稿

コメント