Jquery覆蓋當圖片點擊

Question

不是最好的與jquery，有人可以建議一個通用的方法，我想實現的請嗎？我有一張照片網格，當他們被點擊時，一張不透明的疊加層將在整個圖片之上進行動畫，疊加層將包含一些動態設置的文本。我有圖像，onclick處理程序正在工作，只是試圖找出應用疊加層的最佳方式。謝謝

Answer 1

不是很漂亮的語義，但應該完成工作： 假設你的圖片是200x200。

<div class='imgcontain'> 
<img src='yourimg' alt='' width='200' height='200'> 
<p>Your text>/p> 
</div> 

<div class='imgcontain'> 
<img src='yourimg' alt='' width='200' height='200'> 
<p>Your text>/p> 
</div> 

<div class='imgcontain'> 
<img src='yourimg' alt='' width='200' height='200'> 
<p>Your text>/p> 
</div> 

//等等......

然後，CSS：

.imgcontain 
{ 
position: relative; 
width: 200px; 
height: 200px; 
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide. 
} 

.imgcontain img 
{ 
position: absolute; 
width: 200px; 
height: 200px; 
top: 0px; 
left: 0px; 
z-index: 2; 
} 

.imgcontain p 
{ 
position: absolute; 
display: block; 
width: 200px; 
height: 200px; 
top: 0px; // if slide from top, -200px 
left: 0px; 
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat 
z-index: 1; 
} 

.imgcontain:hover p 
{ 
z-index: 3; // if slide from top, top: 0px 
} 

這是一個純CSS的解決方案，沒有動畫，工程與JavaScript的用戶。

如果你想，然後使用jQuery製作動畫：

$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback. 

然後，在點擊/鼠標懸停

$(.imgcontain).click(function() 
{ 
$(.imgcontain p).show(); 
}); 

Answer 2

檢查這個網站可能是幫助你。 http://flowplayer.org/tools/overlay/index.html