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