Heres는 링크이 점진적 호버 효과

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

당신이 중 하나에 의해 같은 효과를 하나 개의 이미지를 고수하고 얻을 수 :

는 여기에 관련 코드의

HTML5와 greyscale to colour에서가는

1. 캔버스와 jQuery (나에서 작동하지 않습니다. e8).
그냥 불투명도를 거절하고 같은있는 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"); 
}); 

이나 뭐 어쨌든