将鼠标悬停在图像上时的文本答案

【问题标题】：Text when hovering over images将鼠标悬停在图像上时的文本
【发布时间】：2017-10-13 17:40:43
【问题描述】：

我已经创建了一个网页，其中连续三张图像占据四列我希望当鼠标悬停在不同图像上时，不同的文本会出现在不同的图像上。我会很感激这方面的帮助。

我目前的HTML代码如下：

.col-4 {width: 33.33%; float:left;}
.col-4 img {
  width: 100%;
  max-width: 300px;
  height: 300px;
  display: inline-block;   
}

<div class= "container">
  <div class= "overPhotos">
    <div class= "row">
      <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
      </div>
      <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
      </div>
      <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
      </div>
    </div>
  </div>
</div>

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
您在发帖前是否尝试过搜索此内容？字面上有hundreds of similar questions 有答案
How to put text over images in html?的可能重复

标签： html css

【解决方案1】：

您需要将:hover 块添加到您想要悬停的任何元素上。这是将为您实现此目的的代码：

.col-4 {
  width: 33.33%;
  float: left;
  position: relative;
}

.col-4 img {
  width: 100%;
  max-width: 300px;
  height: 300px;
  display: block;
}

.col-4 .hover-text {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.col-4:hover > .hover-text {
  display: block;
}

<div class="container">
  <div class="overPhotos">
    <div class="row">
      <div class="col-4 ">
        <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image">
        <span class="hover-text">Hello, World!</span>
      </div>
      <div class="col-4 ">
        <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image">
        <span class="hover-text">Hello, World!</span>
      </div>
      <div class="col-4">
        <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image">
        <span class="hover-text">Hello, World!</span>
      </div>
    </div>
  </div>
</div>

我向每个悬停元素添加了position: absolute;，这需要向每个容器添加position: relative;。

Fiddle here.

【讨论】：

【解决方案2】：

尝试遵循简单的风格。

.col-4 {width: 33.33%; float:left;position: relative;overflow: hidden;}
.col-4 img{
width: 100%;
max-width: 300px;
height: 150px;
display: inline-block;   
}

.col-4 .caption {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  z-index: 1;
  padding: 4px;
  bottom: -100%;
  transition: bottom ease 0.4s;
}

.col-4:hover .caption {
  bottom: 0;
}

<div class= "container">

<div class= "overPhotos">
    <div class= "row">
        <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
        <div class="caption">Image 1</div>
        </div>
        <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
        <div class="caption">Image 2</div>
        </div>
        <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
        <div class="caption">Image 3</div>
        </div>
    </div>
</div>
</div>

【讨论】：

【解决方案3】：

.col-4 {width: 30%; float:left; background: #000; margin: 10px; position: relative;}
.col-4 img{
width: 100%;
max-width: 300px;
height: 300px;
display: inline-block;   
}
.col-4 span {
    color: #fff;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display:none;
}
.col-4:hover span  {
display:block;
}

	  <div class= "container">

<div class= "overPhotos">
    <div class= "row">
        <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
        <span>image caption</span>
        </div>
        <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
        <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
    </div>
</div>
</div>

.col-4 {width: 30%; float:left; background: #000; margin: 10px; position: relative;}
.col-4 img{
width: 100%;
max-width: 300px;
height: 300px;
display: inline-block;   
}
.col-4 span {
    color: #fff;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

	  <div class= "container">

<div class= "overPhotos">
    <div class= "row">
        <div class="col-4 ">
        <img src="rick_sanchez.png" alt="Avatar" class="image">
        <span>image caption</span>
        </div>
        <div class="col-4 ">
        <img src="morty_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
        <div class="col-4">
        <img src="summer_smith.png" alt="Avatar" class="image">
         <span>image caption</span>
        </div>
    </div>
</div>
</div>

【讨论】：

这会在图像上显示文本，但 OP 希望文本出现在悬停时。

【解决方案4】：

这样做的基本方法是使用title属性：

<img src="" alt="" title="your text goes here">

或者更高级的东西：Link

【讨论】：

【解决方案5】：

你只需要在图片标签中添加title属性...

<img src="rick_sanchez.png" title="abc"  alt="Avatar" class="image">

【讨论】：

【解决方案6】：

更改图片上的替代文字。

<img src="summer_smith.png" alt="<your text here>" class="image">

【讨论】：

你可能是指标题属性。
我看到它已经改变了，它曾经是alt。我猜我已经远离 html 很久了。

【解决方案7】：

这种仅使用 CSS 的方法怎么样？

.col-4:nth-child(1):hover:after{position: absolute; content:"your text 1";}
.col-4:nth-child(2):hover:after{position: absolute; content:"your text 2";}
.col-4:nth-child(3):hover:after{position: absolute; content:"your text 3";}

查看这些可爱的小猫以获取工作演示：https://codepen.io/anon/pen/WZgQPE

PS。请按住 Ctrl 键单击链接为SO refuses to implement target='_blank'。

【讨论】：