CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
user3150060
user3150060

Reputation: 1745

Jquery fade in and out between color and BW image

I m trying to have on hover to fade the colored image to black and white image. so what I was thinking to do is to use JqueryUI switchClass and fade between two classes

here is my CSS : 

 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+, Firefox on Android */
 filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
 }

this is the class which will make the image B& W

I have an image here :

<div class="thumbnail">
    <img  src="/images/colored.jpg" class="img"/>
   </div>

My Jquery code is : 

 $('.thumbnail').mouseover(function(){
$('.img').switchClass( "img", "grayscale", 1000, "easeOutBounce" )
  });
 $('.thumbnail').mouseout(function(){
$('.img').switchClass( "grayscale", "img", 1000, "easeInOutQuad" )
 });

its not working , its not fading in and out smoothly , could someone help me?

Thanks

Upvotes: 0

Views: 1321

Answers (2)

TheBokiya
TheBokiya

Reputation: 620

You don't need a jquery for that. You can use css.

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+, Firefox on Android */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}
img.grayscale:hover{ 
 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");
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

Here your html tag should be

<div class="thumbnail">
    <img  src="/images/colored.jpg" class="img grayscale"/>
</div>

This solution is quite simple and I find it effective to use across multiple browsers. It simply uses the :hover and filter in the css to avoid all the jquery stuff.

source: http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

Upvotes: 3

Sakai
Sakai

Reputation: 637

You don't need javascript:

img.grayscale{-webkit-transition: all 0.2s ease;}
img.grayscale:hover {
    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; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Hope that helps

Upvotes: 0

Related Questions