ホーム   WEBデザイン   CSSで画像マウスオーバー(ホバー)時にモノクロ(グレイスケール)化する。

 WEBデザイン    3,015

 

CSSで画像マウスオーバー(ホバー)時にモノクロ(グレイスケール)化する。

このエントリーをはてなブックマークに追加

このサイトのトップでも現在利用していますが、マウスオーバー(ホバー)した時に写真がカラーからふわっとモノクロ(グレースケール)になるCSSです。0.5秒で変化するようにしています。

CSS

.toGray{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
transition:0.5s;
transition:0.5s;
}

.toGray:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}

デモ

マウスオーバーで下の写真がグレースケールに変わります。

1

スポンサーリンク

 

Twitter でbbpをフォローしよう!

コメント

このエントリーをはてなブックマークに追加

プロフィール

bbb

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。