したがって、通常の画像から色付き/暗い画像へのロールオーバーを行うことについて、ここには多くの質問がありますが、実際には反対のことをしようとしています. サムネイルをグレースケールで開始し、大幅に暗くし、ロールオーバーすると自然なフルカラーの画像が表示されるようにします。
グレースケールからカラーへのホバーは正常に機能しています。画像を暗くするのに問題があるので、投稿のタイトルを実際に見ることができます。jQuery については何も知りませんが、CSS については「大丈夫」です。
私が現在取り組んでいるコードは次のとおりです。
.post_home {width: 305px; height: 175px; float: left; margin: 0 0 25px 15px; visibility: visible; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */}
.post_home:hover {filter: none; -webkit-filter: grayscale(0); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");}
.thumb {display: block; width: 305px; height: 175px; position: relative; background-color: #000}
.thumb img {display: block; width: 305px; height: 175px; opacity: .4;}
.thumb img:hover {display: block; width: 305px; height: 175px; opacity: 1;}
私は 99% この CSS もかなり重いです。私はウェブではなくプリント デザイナーです。
このサイトには、私が目指しているのと同じ種類の効果があります: Truf Creative