jquery - How to do this gradual hover effect

Question

Heres a link: http://www.45royale.com/work/

On his page when you hover over a work he has done a cool hover comes over it. It replace the image with another. Is this jquery or css? How can i achieve this?

Answer 1

jquery along with two separate images, fading in and out on hover.

You should learn to use the view source/developer tools probably built in to your browser (try hitting F12).

Here's the relevant code:

$("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 つの画像に固執して同じ効果を得ることができます。

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");
   });
   

とにかくそのようなもの