Help us understand the problem. What is going on with this article?

CSSだけでマウスオーバーしたときに画像を白みがかったようにさせる

More than 5 years have passed since last update.

時々使うのに忘れていることが多いのでここにメモ。
(12/6/22 IE対応のためCSSの記述を追記しました)

<a href="hogehoge.html"><img src="image/hoge.jpg" class="overwhite" /></a>
a:hover img.overwhite{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}

白みがかった…というよりは、透明度を変えているだけなので
背景色によっては薄くなるようにしか見えないと思います。
そんなときはこっち↓の記述をどうぞ。

imgにつけていたclassを、Aタグに付け替えました。

<a href="hogehoge.html" class="overwhite"><img src="image/hoge.jpg" /></a>
a.overwhite{
    background-color:#ffffff;
    display:block;
}

a.overwhite:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}

Aタグに白背景を設定して、白っぽくなるように見せているだけです。
背景色をいろいろ変更してみるのもいいかもしれませんねー。

nobuko012
ブログリニューアルしたいとずっと思いつつなかなかリニュできてないので、とりあえずこっちに残していきます。
http://blog.prism-ww.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away