如何在缩略图图像上添加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的悬停，如果这是您要达到的目的。