如何做到这种渐进的悬停效果

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 canvas和jQuery从greyscale to colour开始（在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");
   });
   

无论如何

或类似的东西