ホーム WEBデザイン 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](https://i0.wp.com/bbp.jp/wp-content/uploads/2016/04/1-17.jpg?resize=640%2C480&ssl=1)
スポンサーリンク
Twitter でbbpをフォローしよう!
Follow @https_bbp_jpこんな記事もあります。
コメント
プロフィール
![](https://bbp.jp/wp-content/themes/bbp/img/bbp.jpg)
bbb
はWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。