{"id":1760,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/misc\/article2.html"},"modified":"2020-01-31T05:40:51","modified_gmt":"2020-01-31T10:40:51","slug":"grayscale-hover-effect","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/grayscale-hover-effect.html","title":{"rendered":"Grayscale Hover Effect"},"content":{"rendered":"<p>This script allows to add smooth grayscale hover effect, based on sprites.<\/p> <p> <strong>JavaScript <br \/><\/strong> In order to make the script work, the <strong>index-#.html<\/strong> file with a hover effect should contain these lines of HTML code in order to include <strong>jquery.slices.1.2.js<\/strong> script and jQuery framework:<\/p> <p>The bottom section of the <strong>index-#.html<\/strong> (just before <strong>&lt;\/body&gt;<\/strong> closing tag) file contains these lines of code that initialize the script functionality with basic values:<\/p> <p>The idea of the plug-in is to smoothly desaturate the image and add a link to it:<\/p> <p> <strong>HTML <br \/><\/strong> Below you can see the HTML script representation:<\/p> <p>The HTML part is represented by a bulleted list. Note that each image is put into <strong>&lt;a&gt;<\/strong> and <strong>&lt;span&gt;<\/strong> tags in order to show the image in the default state.<\/p> <p> <strong>CSS<\/strong> <br \/>You can find script related stylesheet in the main <strong>style.css<\/strong> file. You will need to modify the following styles: <br \/><\/p>","protected":false},"excerpt":{"rendered":"<p>This script allows to add smooth grayscale hover effect, based on sprites. JavaScript In order to make the script work, the index-#.html file with a hover effect should contain these lines of HTML code in order to include jquery.slices.1.2.js script and jQuery framework: The bottom section of the index-#.html (just before &lt;\/body&gt; closing tag) file [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[264],"tags":[813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1760"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1760"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1760\/revisions"}],"predecessor-version":[{"id":86136,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1760\/revisions\/86136"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}