Wie dies schrittweise Hovereffekt

Question

Heres einen Link: http://www.45royale.com/work/

Auf seiner Seite, wenn Sie eine Arbeit schweben über er eine kühle schweben kommt über sie getan hat. Es ersetzt das Bild durch ein anderes. Ist das Jquery oder CSS? Wie kann ich das erreichen?

Answer 1

jquery zusammen mit zwei separaten Bildern, ein- und ausblenden bei Hover.

Sie sollten lernen, die View Source/Developer Tools zu verwenden, die wahrscheinlich in Ihrem Browser eingebaut sind (versuchen Sie F12 zu drücken).

Hier ist der entsprechende 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

Sie mit einem Bild halten können und denselben Effekt entweder erhalten:

1. Wenn man von greyscale to colour mit html5 Leinwand und jQuery (funktioniert nicht in i e8).

2. Schalten Sie einfach Opazität nach unten und eine HTML-Beschriftung mit so etwas wie überlagern:

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

oder so etwas ohnehin