Question

我目前有一些列表项。每个人都有一个图像，然后是一些文字。

＆＃13;

ul {
    width:300px;
    list-style-type: none;
}

＆＃13;

<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>

＆＃13;

我很难看到如何使用纯css进行此操作？我喜欢图像在悬停时将文本放在上面（有点像imgur.com的做法。）在imgur.com上如果你将鼠标悬停在缩略图上，它会在底部告诉你有多少赞成东西具有。我该怎么做呢？

Answer 1

如果我理解正确 - 你只需要在相对定位的LI项目中添加位置文本。并且不要忘记将.thumbnail课程添加到LI 您还可以使用top，left，bottom和right CSS属性进行文字定位。

注意：仅在悬停时显示文字 - 默认情况下只需使用display:none隐藏文字并在:hover事件中显示。
注2：也可以通过transitions和不透明度添加动画。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

<ul>
    <li>
        <div class='container'>
            <img src="http://placehold.it/350x150"/>
            <p>Cool image</p>
        </div>
   </li>
    ...
</ul>

.container {
    position:relative;
}

.container p {
    position:absolute;
    width: ;
    height: ;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
}


.container:hover .container p {
    visibility: visible;
    opacity: 1;
}

Answer 3

请按照以下步骤操作：

制作li position:relative
制作图片和文字position: absolute和top: 0;left: 0
将opacity: 0提供给文字
在悬停时生成opacity: 1

[img containing a]:hover ~ [text element] { opacity: 1; }

以下是我建议的小提琴：http://jsfiddle.net/zdz8x6wq/

Answer 4

这是你要找的吗？

请注意，每个＆lt; li＆gt;只有一个链接，并且叠加层位于其中。

ul {
    width:300px;
    list-style-type: none;
}
li {
    position:relative;
}
.thumbnailContainer:link .overlay {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0.7;
    display:none;
    width:350px;
    height:150px;
}
.thumbnailContainer:hover .overlay {
    display:block;
}

<ul>
    <li>
        <a class="thumbnailContainer" href=""><img src="http://placehold.it/350x150"/>
        <div class="overlay">Cool image</div></a>
    </li>
    <li>
        <a class="thumbnailContainer" href=""><img src="http://placehold.it/350x150"/>
        <div class="overlay">Cool image</div></a>
    </li>
    <li>
        <a class="thumbnailContainer" href=""><img src="http://placehold.it/350x150"/>
        <div class="overlay">Cool image</div></a>
    </li>
   </ul>

CSS - 获取图像以在悬停时显示叠加在图像顶部的文本？

4 个答案: