2011-08-23 100 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的(例如)將是這個樣子:

$('.fadable-image').each(function(){ 
$(this).hover(function(){ 
    $(this).animate({opacity: 0.5}, 250, 'swing'); 
},function(){ 
    $(this).animate({opacity: 1}, 250, 'swing'); 
}); 
}); 

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

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

也可以用CSS僞類完成,但隨後沒有影響。