画像ホバーした時、半透明の白色レイヤーをふわっと乗せる設定についてのまとめです。
やり方は色々あると思いますが この記事で紹介するのは、まず背景を白色に設定してから画像の透明度をつけることで白いレイヤーをふわっと乗せたような効果をつける方法です。
画像ホバーした時、半透明の白色レイヤーをふわっと乗せる
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記事
PICK UP
TIPS記事セレクション
