2011-08-23 4 views
2

어떻게 이미지를 어둡게 만든 다음 here과 같은 png 이미지를 오버레이합니까?오버레이 png 이미지 및 어둡게 이미지를 가져 오기

<!DOCTYPE html> 
<html> 
<head> 
<title>JQuery Effect</title> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=3.2'></script> 
</head> 
<body> 
<img src="http://i25.lulzimg.com/7cd053.jpg"/> 
</body> 
</html> 
+2

지금까지 시도한 것을 보여 주면 도움이 될 수 있습니다. – slapthelownote

답변

2

어떻게 완료되었는지 직접 확인할 수 있도록 사이트에서 코드를 가져 왔습니다. img 파일 경로가 알려지지 않아 + 이미지가 표시되지 않습니다.

See here.

+0

굉장해! 어떻게 이미지를 삽입하면 어떻게 될까요? – Goliath

+1

http://jsfiddle.net/thirtydot/xbkK6/1/ – thirtydot

+0

Thirtydot이 해결했습니다! img를 CSS의 .hover a.link_blog 셀렉터에 넣으십시오. – Kyle

4

이미지 컨테이너에 검은 배경 색상을 넣어 호버의 이미지를 페이드 아웃 :

여기에 내 현재 코드입니다. (예를 들어)

JQuery와는 다음과 같이 보일 것입니다 :

http://api.jquery.com/hover/

http://api.jquery.com/animate/

$('.fadable-image').each(function(){ 
$(this).hover(function(){ 
    $(this).animate({opacity: 0.5}, 250, 'swing'); 
},function(){ 
    $(this).animate({opacity: 1}, 250, 'swing'); 
}); 
}); 
도하지만 효과없이 CSS 의사 클래스와 함께 할 수 없습니다.