Grey Image change in hover colorful image

Posted: March 21, 2013 in Java Scripts

<!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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s