2016年2月アーカイブ

CSSでマウスオーバー半透明

| コメント(0)
マウスオーバーすると半透明になる効果です。
最近はJSではなくCSSでやることが増えてきたためメモしておきます。

■CSS

.imgover {
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.imgover:hover {
filter:Alpha(opacity=70); /* 旧IE */
opacity: 0.7;
}


これだけ、簡単です。
あとは効果を付けたい要素に class="imgover" を付けるだけ!

transition を使っているためIE9以下の古いブラウザでは対応していませんが、
その場合もフェードはしないものの半透明にはなるので、
厳密に同じでなくても良い場合は使ってしまって良いと思います。

このアーカイブについて

このページには、2016年2月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2015年10月です。

次のアーカイブは2016年6月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。