jquery - 如何做这种渐变的悬停效果

Question

这是一个链接：http ://www.45royale.com/work/

在他的页面上，当您将鼠标悬停在他已经完成的工作上时，他会很酷地悬停在它上面。它用另一个替换图像。这是jquery还是css？我怎样才能做到这一点？

Answer 1

jquery 以及两个单独的图像，在悬停时淡入淡出。

您应该学习使用可能内置在浏览器中的查看源代码/开发人员工具（尝试按 F12）。

以下是相关代码：

$("div.casestudy img.hovered").hide();
$("div.casestudy").hover(function() {
$(this).find('img').fadeIn(200);
}, function() {
$(this).find('img.hovered').fadeOut(200);
});

http://www.45royale.com/wp-content/themes/45v6_sandbox/images/work/img_dww.jpg

http://www.45royale.com/wp-content/themes/45v6_sandbox/images/work/img_dww_hovered.jpg

Answer 2

您可以坚持使用一张图片并通过以下任一方式获得相同的效果：

1. 使用 html5 画布和 jQuery从灰度到彩色（在 ie8 中不起作用）。

2. 只需调低不透明度并使用以下内容覆盖 html 标题：

   $("div.casestudy").hover(function() {
   $(this).find('caption').fadeIn(200);
   $(this).find('img.hovered').animate({"opacity": "0.3"}, "slow");
   }, function() {
   $(this).find('caption').fadeOut(200);
   $(this).find('img.hovered').animate({"opacity": "1"}, "slow");
   });
   

或者类似的东西