2017年4月21日金曜日

CSSのみで画像をロールオーバーさせる方法 | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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


ブログランキング・にほんブログ村へ

0 件のコメント:

コメントを投稿

Ads by A8.net