CSSのみで画像をロールオーバーさせる方法

Webページやブログにおいて、リンクとして画像を使用している場合、マウスオーバーした場合にロールオーバーすると、デザイン的にもきれいになると思います。

今回は、ほかに画像を使わず、CSSのみで半透明にさせることでロールオーバーさせる設定について書きたいと思います。

参考にしたページ

今回、ロールオーバーさせるのに参考にしたページは下記になります。

超シンプル！hover画像作る必要ナシ、CSSだけで、画像をロールオーバー！ | しらさかブログ

設定方法

CSS

下記のコードを、CSSのコードに追加する。

a:hover img.hover_img{
opacity:0.8; //不透明度0.8
filter:alpha(opacity=80); //不透明度80%（IE用）
-ms-filter: "alpha( opacity=80 )"; //不透明度80%（IE用）
}

コードの意味は、imgタグでclassをhover_imgに指定したリンク画像にマウスオーバーすると、不透明度80%の半透明になります。

HTML

下記のようなコードを表示させたい場所に追加する。

<a href='#'><img class='hover_img' src='画像のURL'/></a>

sample

以下は、サンプルになります。

補足

ロールオーバーさせる際、違う画像にする場合は下記の方法があります。

• CSSのみ（background-imageの切替え）
• CSSスプライト（background-positionの切替え）
• <img>+CSS（マウスオーバーでimg非表示）
• <img>のみ（onmouseout属性, onmouseover属性）
• <img>+jQuery（src属性の置き換え）

ここでは、詳しく触れませんが、下記のページに方法が書いてありますので参考にしてみてください。

【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？） | クロノドライブ


以上、参考にしていただけたら幸いです。

• 
• list ツイート