悬停在图像上的文字

-2

我创建了一个网页，其中有三个图像，每个图像占用四列，当鼠标悬停在不同的图像上时，我希望不同的文字出现在不同的图像上。我会很感激帮助。悬停在图像上的文字

我当前的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>

来源

2017-10-11 Computing User

欢迎堆栈溢出！预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

您是否在发布前尝试过搜索此内容？字面上有[数百个类似的问题]（https://stackoverflow.com/search？q =文本+悬停+ + +图片）与答案 – FluffyKitten

可能重复的[如何将文本放在HTML图像？]（https://stackoverflow.com/questions/5758642/how-to-put-text-over- images-in-html） – godzsa

您需要将: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。

来源

2017-10-11 11:14:36

变化您的图片alt文本。

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

来源

2017-10-11 11:02:53 Idlepoze

你可能是指title属性。 – VXp

我看到它已经改变，它曾经是alt。远离HTML到很久我猜。 – Idlepoze

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

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

或者也可以是更先进：Link

来源

2017-10-11 11:05:41 18zehn

试试下面这个简单的风格。

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

来源

2017-10-11 11:12:07 Harish

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

\t <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%); 
 
}

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

来源

2017-10-11 11:13:33 Saika

这显示图像上方的文字，但OP希望文字出现在悬停上。 –

是的，我编辑了我的代码:) – Saika

这个怎么样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'。

来源

2017-10-11 11:13:34 JoostS

你只需要在图像标签添加标题属性...

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

来源

2017-10-11 11:23:44

悬停在图像上的文字

回答

相关问题