My Vector Space

  人生は寄り道してなんぼ

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

 

背景を白にして、画像の透明度を変えていくという設定です。  

 

まずaタグにid名をつけてこの設定
 【 CSS
 1
  #sample-anchor{
 2
    background-color:#ffffff;  /*背景に白を設定*/
 3
    display:block;  /*ブロック化*/
 4
    width:○○○px;
 5
    height:○○○px;
 6
    }

 

次に対象となる画像に設定
 【 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
    }

 

 

 

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

PAGE TOP