<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> <style> .gallery {float:left; border: solid 1px red; padding: 20px 0; } /* Below Grayscale Method found at: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html */ img.grayscale { 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+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } img.grayscale.on { 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"); -webkit-filter: grayscale(0%); } </style> </head> <body> <div class="gallery"> <img class="grayscale" src="Image path"/> </div><script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function () { $(".gallery").mouseenter(function () { $(this).children('img').addClass('on'); }).mouseleave(function () { $(this).children('img').removeClass('on'); }); }); </script> </body> </html>
Advertisements
