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

 WEBデザイン    1,745

 

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

スポンサーリンク

コメント

プロフィール

bbb

WEBデザインと輸出入業してます。海外関連、グルメ関連をメインに記事にしています。キュレーションへの投稿、ページのいいねとシェアに喜びます。個人事業の方を応援します!

I'm web designer, and export-import business also. Feel free you can add me on Facebook

 https://www.facebook.com/bbp.jp