gpt4 book ai didi

html - CSS - 获取图像以在悬停时在图像顶部显示文本叠加层?

转载 作者:太空宇宙 更新时间:2023-11-04 03:17:52 24 4
gpt4 key购买 nike

我目前有几个列表项。每个都有一张图片,后面跟着一些文字。

ul {
width:300px;
list-style-type: none;
}
<ul>
<li>
<a href=""><img src="http://placehold.it/350x150"/></a>
<a href="#">Cool image</a>
</li>
<li>
<a href=""><img src="http://placehold.it/350x150"/></a>
<a href="#">Cool image</a>
</li>
<li>
<a href=""><img src="http://placehold.it/350x150"/></a>
<a href="#">Cool image</a>
</li>
</ul>

我不知道如何/是否可以使用纯 CSS 来做到这一点?我希望图像在悬停时在其顶部显示文本(有点像 imgur.com 的做法。)在 imgur.com 上,如果您将鼠标悬停在缩略图上,它会在底部告诉您有多少赞成票。我该怎么做?

最佳答案

如果我理解正确 - 您只需要在相对定位的 LI 项内添加绝对定位文本。并且不要忘记将您的 .thumbnail 类添加到 LI 中。
您还可以使用 topleftbottomright CSS 属性来尝试文本定位。

注意:要使文本仅在悬停时可见 - 只需使用 display:none 默认隐藏文本并在 :hover 事件中显示它.
注意 2: 还可以通过 transitions 和不透明度添加动画。

ul {
width:300px;
list-style-type: none;
}
.thumbnail {
position:relative;
}

.thumbnail .text {
opacity: 0;
position: absolute;
bottom: 5px;
left: 0px;
transition: opacity 500ms;
}

.thumbnail:hover .text {
opacity: 1;
}
<ul>
<li class="thumbnail">
<a href=""><img src="http://placehold.it/350x150"/></a>
<a href="#" class="text">Cool image</a>
</li>
<li class="thumbnail">
<a href=""><img src="http://placehold.it/350x150"/></a>
<a href="#" class="text">Cool image</a>
</li>
<li class="thumbnail">
<a href=""><img src="http://placehold.it/350x150"/></a>
<a href="#" class="text">Cool image</a>
</li>
</ul>

关于html - CSS - 获取图像以在悬停时在图像顶部显示文本叠加层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28398442/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com