如何在縮略圖圖像上添加html元素

Question

我有一個庫中的縮略圖圖像列表，我想知道我會如何做出這樣的事情？

在我的理解，我看到有可能的唯一方法是使縮略圖作爲一個div內的背景圖像，並將這些元素在它的上面顯示。有沒有其他的方法來做到這一點？

Answer 1

你可以使用圖像周圍的包裝DIV包含您覆蓋的東西，圖像的兄弟一個div可能實現這樣的事情： -

<div class='image'> 
    <img src='' /> 
    <div class='image__overlay'></div> 
</div> 

然後你的CSS是這樣的： -

.image { 
    position: relative; 
} 
.image__overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

可以隱藏了display: none覆蓋，只讓它顯示在：在div.image的懸停，如果這是你目標實現的目標。