Show image colored on hover

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, Jun 18 '13 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, Jun 18 '13 at 11:59

score 2 · Answer 1 · answered Jun 18 '13 at 12:03

2

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

-webkit-filter: grayscale(100%);

answered Jun 18 '13 at 12:03

spring

760
4
10

thankyou, so it has no cross-browser compatibility? – Manoz Jun 18 '13 at 12:05
I have not checked it – spring Jun 18 '13 at 12:06
1

for others, you may use rgba() to get to a close result: http://codepen.io/gcyrillus/pen/nqpDd , You have SVG filters as well avalaible for Firefox for instance – G-Cyrillus Jun 18 '13 at 12:11

Show image colored on hover

1 Answers1