我在画廊中有一个缩略图列表,我想知道如何制作这样的东西?
在我的理解中,我认为可能的唯一方法是将缩略图作为 div 内的背景图像,并将这些元素显示在其顶部。有没有其他方法可以做到这一点?
我在画廊中有一个缩略图列表,我想知道如何制作这样的东西?
在我的理解中,我认为可能的唯一方法是将缩略图作为 div 内的背景图像,并将这些元素显示在其顶部。有没有其他方法可以做到这一点?
您可能可以使用图像周围的包装器 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;
}
如果这是您的目标,您可以使用 a 隐藏叠加层,display: none
并且仅使其显示在 div.image 的 :hover 上。