CSS：オンマウス（hover）で画像をフェードする
CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。
HTML
<a href="#"><img src="img/id.png" alt="" width="300" height="100" /></a>CSS
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}解決策
とても単純でした。transitionを a imgに記述します。CSS
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
