My Vector Space

  人生は寄り道してなんぼ

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる

画像にマウスオーバーした時、CSSで半透明の白をふわっと乗せる設定。

やり方は色々あると思いますが この記事で紹介するのは、まず背景を白にしてから画像の透明度をつけることで ふわっとみせる、という方法です。

画像ホバーした時、半透明の白色レイヤーをふわっと乗せる
1. aタグに白い背景を設定する

まず、画像につけているaタグにid名をつけてから、そのaタグに白い背景を設定する。

その際、aタグはブロック化しておく。

 【 CSS
 1
  #sample-anchor{
 2
    background-color:#ffffff;  /*背景に白を設定*/
 3
    display:block;  /*ブロック化*/
 4
    width:○○○px;
 5
    height:○○○px;
 6
    }
2. 対象となる画像にtransitionプロパティとopacityプロパティを設定する

次に、対象となる画像にtransitionプロパティとopacityプロパティを設定する。

transitionプロパティはアニメーションスピードの指定をすることができるCSS3仕様の1つで、opacityプロパティは要素の色の透明度を指定することができるCSS3仕様の1つ。

このプロパティをつけることで、半透明の白をふわっと乗せたような効果を出すことができる。

 【 CSS
 1
  #sample-anchor  img{
 2
    transitional:all  0.5s  ease;
 3
    }
 4
 
 5
  #sample-anchor:hover  img{
 6
    opacity:0.7;
 7
    filter:alpha(opacity=70);
 8
    }

※透明度の設定は、0.0(完全に透明)~1.0(完全に不透明)の数値で指定することができる。

関連記事画像ホバー時に効果をつけるtips記事

PAGE TOP