我有几个小图,我想在悬停时在上面显示一些文本。我可以在悬停时使它们变暗,但不知道如何添加文本。
示例:http://www.lenzflare.com/video-production-portfolio/
这是我所做的:
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -150px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>
最佳答案
好吧,我假设您希望将其放入列表中:
这里有几个主要概念:相对定位及其如何与绝对定位、源顺序和您的居中技术配合使用。
当给出position:relative时;对于盒子,你是在说“我现在是边界 - 对于我体内任何绝对定位的东西”(除非它们是相对的,然后就像那样在线) - 所以,你想要淡入的绝对定位的覆盖物- 绝对定位到相关框的一个或多个边缘。 (大多数人使用 top: 0; left: 0;)--- 因此绝对框不再处于“流”中,而是生活在由相对父级决定的自己的魔法世界中。
源代码顺序:您的 html 在堆叠时将自下而上显示。所以你的封面应该在图片下方(以 html 顺序) - 你可以使用 z-index - 但没有必要这样做。
负边距在这里并不是很好,也不需要。您可以将它们文本对齐居中。我会做一些测试并在东西周围加上边界,这样你就可以看到它到底发生了什么。另外 - 我鼓励你使用 box-sizing: border-box;关于一切......
阅读:Border box
HTML
<ul class="thumbnail-list">
<li>
<a href="#" class="image-w">
<img alt="thumbnail"
src="http://placekitten.com/600/300" />
<div class="cover">
<h3>Title</h3>
<p>A little bit more about the thing</p>
</div>
</a>
</li>
</ul> <!-- .thumbnail-list -->
CSS
.thumbnail-list {
list-style: none;
margin: 0; paddingn: 0;
}
.thumbnail-list li {
float: left;
}
a {
text-decoration: none;
color: inherit;
}
.thumbnail-list .image-w {
display: block;
position: relative;
width: 16em;
}
.image-w img {
display: block;
width: 100%;
height: auto;
}
.cover {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
color: rgba(255,255,255,0);
text-align: center;
transition: all 1s linear;
}
.cover:hover {
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
transition: all .2s linear;
}
.thumbnail-list h3 {
font-size: 1.2em;
}
.thumbnail-list p {
font-size: .9em;
}
关于javascript - 如何在图像悬停中显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20036531/