將圖片懸停在另一張圖片懸停與jQuery的畫廊

Question

我有一個畫廊，我想疊加每個圖像懸停與透明的圖像，有一個縮放圖標。我如何用jQuery以最有效的方式完成此任務？所有的畫廊圖像是在<a></a>標籤象下面這樣：

<a href="pictures/gallery/fullHD/1.jpg" target="_blank"> 
    <img src="pictures/gallery/fullHD/1.jpg" class="gallery_pic"/> 
</a> 

我尋找答案，但我找不到任何解決我的問題。如果你知道一個沒有jQuery的方法來完成這個，那也可以。

Answer 1

這裏不需要jQuery - 你可以單獨使用CSS來實現你所需要的。您可以使用:before僞類向:hover上顯示的a元素添加內容。試試這個：

a:before { 
    position: absolute; 
    font:normal normal normal 14px/1 FontAwesome; 
    content: "\f002"; 
    top: 5px; 
    left: 5px; 
    width: 50px; 
    height: 50px; 
    opacity: 0; 
    -webkit-transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    transition: opacity 0.5s; 
} 
a:hover:before { 
    opacity: 1; 
} 

Example fiddle

請注意，我用FontAwesome添加一個放大鏡圖標，但是你可以很容易地使用任何你需要的圖像，並設置background-image屬性。