鼠标移到图片上显示文字
时间: 2023-08-02 09:11:43 浏览: 77
你可以使用HTML和CSS来实现鼠标移到图片上显示文字的效果。
HTML代码:
```
<div class="image-container">
<img src="image-url.png" alt="图片描述">
<div class="overlay-text">文字描述</div>
</div>
```
CSS代码:
```
.image-container {
position: relative;
display: inline-block;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
font-size: 16px;
opacity: 0;
transition: opacity 0.5s ease;
}
.image-container:hover .overlay-text {
opacity: 1;
}
```
其中,image-container类设置了相对定位,overlay-text类设置了绝对定位,并且使用了transform属性将其居中显示。在默认状态下,overlay-text的opacity属性为0,即不透明度为0,鼠标移到图片上时,通过:hover伪类将opacity属性设置为1,使其显示出来。
你只需要将对应的图片URL和文字描述替换即可。