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

マウスオーバーで写真を白く透過させる方法 #css

More than 3 years have passed since last update.

マウスオーバーで写真を白く透過させる方法

背景に写真など配置してしまっていると単純に opacity を設定するだけでは透過して背景の写真が見えてします。そんな時に使用できます。

index.html
<a href="#">
    <img src="hoge.jpeg">
</a>
style.css
a {
    background-color: #ffffff;
}
a img:hover {
    opacity: 0.6;
}

<a>の背景色を変えることで、透過した時の色を設定することができるます。(例: マウスオーバー時に黒く透過させたければ background-color: #000000 とする)

opacityをブラウザ対応させたい場合には以下を記述してください。

filter: alpha(opacity=60);        /* IE 6,7 */
-ms-filter: "alpha(opacity=60)";  /* IE 8,9 */
-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.6;              /* Safari 1.x */
tanaka-web
フロントエンドエンジニア HTML / CSS(Sass, styled-components)/ JavaScript(React, TypeScript, ES6, jQuery) npm, yarn, webpack, parcel, Git, docker, vagrant, circleCI, WordPress
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