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以下の古いブラウザでは対応していませんが、
その場合もフェードはしないものの半透明にはなるので、
厳密に同じでなくても良い場合は使ってしまって良いと思います。

コメントする

このブログ記事について

このページは、gravity-worksが2016年2月24日 10:44に書いたブログ記事です。

ひとつ前のブログ記事は「YouTubeの埋め込み動画を幅100%に対応させるCSS」です。

次のブログ記事は「IEで互換表示させない」です。

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