CSS - 获取图像以显示悬停在图像顶部的文字？

Question

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

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上，如果您将鼠标悬停在缩略图上，底部会显示有多少事情发生。我将如何去做这件事？

Answer 1

如果我理解正确 - 您只需在相对定位的LI项目内添加位置文本。并且不要忘记将您的.thumbnail课程添加到LI s。
您还可以使用top，left，bottom和right 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>

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

按照下列步骤操作：

1. 充分利用liposition:relative
2. 使图像和文字position: absolute和top: 0;left: 0
3. 给opacity: 0文本

4. 使opacity: 1悬停

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

这里是什么，我提出了一个小提琴：http://jsfiddle.net/zdz8x6wq/

Answer 4

这是你在找什么？

请注意，每个< li>只有一个链接，并且叠加层位于其中。

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>