How to create colored image mouseover on black/white images (in JQuery)

Question

I'm wondering if there are any good solutions available for turning a color image into a black/white solid state and allowing it to transition back into a colored image on mouse over using jQuery?

I tried a CSS method as described here: Image Greyscale with CSS & re-color on mouse-over?, but I'm not having much luck with it.

Here is the current site: http://frixel.com/wp/ - I am trying to create the effect on the gallery grid.

To help someone answer the question, I suggest posting the relevant HTML, CSS, and javascript in your question. — htxryan, Aug 27 '13 at 16:03
The example you posted uses a SVG image, and you can manipulate those. With a normal image you could replace the SRC for example... — koningdavid, Aug 27 '13 at 16:03
Just have two versions of the image, one color and one black-and-white, and change the src attribute on hover. That will be the fastest/most reliable way to handle this. — cfs, Aug 27 '13 at 16:12

score 6 · Answer 1 · answered Aug 27 '13 at 16:14

Hey you are talking about CSS filters... this what you need add this code to your main stylesheet file ;)

.portfolio:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-webkit-filter: grayscale(1);
}

score 3 · Answer 2 · answered Dec 03 '13 at 11:24

3

maybe a solution would be to use this plugin:

http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

a demo with carousel: http://interio.tohidgolkar.com/shortcodes/clients-carousel/

answered Dec 03 '13 at 11:24

Michal - wereda-net

940
9
14

score 0 · Answer 3 · edited Nov 06 '21 at 11:40

Use this below code, It helps to create colored image mouseover on black/white image.:

<style>
.blk-white{-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript">
function display_blackwhite(obj) {
$(obj).addClass("blk-white");
}
function display_colorphoto(obj) {
$(obj).removeClass("blk-white");
}
</script>
</head>
<body>
<img src="change-colorphoto-black-white1.jpg" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>
<img src="change-colorphoto-black-white2.png" onMouseOver="display_blackwhite(this)" onMouseOut="display_colorphoto(this)" width="350"/>

How to create colored image mouseover on black/white images (in JQuery)

3 Answers3