{"id":296,"date":"2016-09-13T19:37:36","date_gmt":"2016-09-13T19:37:36","guid":{"rendered":"https:\/\/wiki.samuelchopard.ch\/?p=296"},"modified":"2019-03-18T14:29:25","modified_gmt":"2019-03-18T13:29:25","slug":"fade-grayscale-hover-effect-on-images-grayscale-to-colored","status":"publish","type":"post","link":"https:\/\/samuelchopard.ch\/wiki\/library\/fade-grayscale-hover-effect-on-images-grayscale-to-colored\/","title":{"rendered":"Fade grayscale hover effect on images (grayscale to colored)"},"content":{"rendered":"<p><!--more--><\/p>\n<pre class=\"EnlighterJSRAW\">img {\n     -webkit-filter: grayscale(100%); \/* Chrome, Safari, Opera *\/\n     filter: grayscale(100%);\n}\n\nimg:hover {\n     -webkit-filter: grayscale(0%); \/* Chrome, Safari, Opera *\/\n     filter: grayscale(0%);\n}<\/pre>\n<p>You will obtain a better result using this function with <a target=\"_blank\" href=\"https:\/\/samuelchopard.ch\/wiki\/2016\/09\/13\/fade-effect-on-hover-for-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fade Effect on Hover for Images<\/a>.<\/p>\n<p>Source: <a target=\"_blank\" href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"img { -webkit-filter: grayscale(100%); \/* Chrome, Safari, Opera *\/ filter: grayscale(100%); } img:hover { -webkit-filter: grayscale(0%); \/* Chrome, Safari, Opera [...]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[61,94,106,120,131],"class_list":["post-296","post","type-post","status-publish","format-standard","hentry","category-htmlcss","tag-color","tag-effect","tag-fade","tag-grayscale","tag-hover"],"_links":{"self":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/comments?post=296"}],"version-history":[{"count":1,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/296\/revisions"}],"predecessor-version":[{"id":54907,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/posts\/296\/revisions\/54907"}],"wp:attachment":[{"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/media?parent=296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/categories?post=296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/samuelchopard.ch\/wiki\/wp-json\/wp\/v2\/tags?post=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}