Show image colored on hover [duplicate]

Question

How can i show image colored on mouseover?

My questions is similar to this jQuery script i follow for recursively changing images.

A grayscale image

A colored image

$(document).ready(function () { $("#image").hover(function () { $(this).attr("src", "tpi/colored.jpg"); }, function () { $(this).attr("src", "tpi/grayscale.jpg"); }); });

Now is there any other way in css or jQuery with that i could do this without using two images at a time on hover?

Did i forget mentioning "I don't want to use two images" ? Why people answering me awkward. — Manoz
– Manoz, Commented Jun 18, 2013 at 11:58
@Manoz Look at my link. Only uses one image for most browsers, two for Firefox if you count an SVG filter. — jeremy
– jeremy, Commented Jun 18, 2013 at 11:59

spring · Accepted Answer · 2013-06-18 12:03:27Z

2

Working DEMO in chrome http://jsfiddle.net/HF8c7/

-webkit-filter: grayscale(100%);

answered Jun 18, 2013 at 12:03

spring

7704 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manoz Over a year ago

thankyou, so it has no cross-browser compatibility?

spring Over a year ago

I have not checked it

G-Cyrillus Over a year ago

for others, you may use rgba() to get to a close result: codepen.io/gcyrillus/pen/nqpDd , You have SVG filters as well avalaible for Firefox for instance

Collectives™ on Stack Overflow

Show image colored on hover [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related