如何在黑白图像上创建彩色图像鼠标悬停（在JQuery中）

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?

我想知道是否有任何好的解决方案可用于将彩色图像转换为黑/白固态并允许它使用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.

我尝试了一种CSS方法,如下所述:带有CSS的图像灰度和鼠标悬停时重新着色,但我没有太多运气。

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

这是当前的网站:http://frixel.com/wp/ - 我试图在图库网格上创建效果。

3 个解决方案

#1

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

嘿,你在谈论CSS过滤器...这就是你需要将这个代码添加到你的主样式表文件;)

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

#2

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/

旋转木马的演示:http://interio.tohidgolkar.com/shortcodes/clients-carousel/

#3

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"/>

Demo: Here

#1