画像にマウスオーバーした時、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記事