CSS3 | 696graphic[BLOG]

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

画像にリンクしてマウスオーバーした時に、CSSで画像に半透明の白を重ねたいなーと思い色々と試してみました。
以下がそのサンプルですが、実際には半透明の白を重ねているわけではなく、画像の透明度を変えて表現しています。

背景が白だと、透明度変えるだけなのでいいですね。

html

<a href="#">
<img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60" class="hover_img1">
</a>

</a>

css

a .hover_img1{
    transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/
    }
a:hover .hover_img1{
    opacity: 0.7;/*要素の透明度を指定*/
    filter: alpha(opacity=70); /*ie6、7の透明度指定*/
    /*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/
    }

a .hover_img1{

transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/

}

a:hover .hover_img1{

opacity: 0.7;/*要素の透明度を指定*/

filter: alpha(opacity=70); /*ie6、7の透明度指定*/

/*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/

}

で。背景が白の場合は↑の書き方でいいのですが、背景が白でない場合は画像の透明度を変えても半透明の白が乗ったようにならないので、
aタグにクラスを付けて、背景に白を設定します。

html

<a href="#" class="hover_img2">
<img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60">
</a>

</a>

css

a.hover_img2{
    background-color:#fff; /*背景に白を設定*/
    display:block; /*ブロック化重要！*/
    }
a.hover_img2 img{
    transition:all 0.5s ease;
    }
a:hover.hover_img2 img{
    opacity: 0.7;
    filter: alpha(opacity=70);
    }

a.hover_img2{

background-color:#fff; /*背景に白を設定*/

display:block; /*ブロック化重要！*/

}

a.hover_img2 img{

transition:all 0.5s ease;

}

a:hover.hover_img2 img{

opacity: 0.7;

filter: alpha(opacity=70);

}

ここで大事なのがaタグのCSSに設定してる　display:block;　。
これが無いと画像サイズ一杯に指定した背景の白が広がりません。

ということで、サンプルがこちらです。

タグ: CSS3

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