html5 鼠标悬停图片显示文字
时间: 2024-03-25 18:41:39 浏览: 29
您可以通过以下 HTML 代码实现鼠标悬停图片显示文字效果:
```
<!DOCTYPE html>
<html>
<head>
<title>鼠标悬停图片显示文字</title>
<style>
.container {
position: relative;
display: inline-block;
}
.container img {
display: block;
width: 100%;
height: auto;
}
.container .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.5s;
}
.container:hover .text {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="your-image-url" alt="your-image-description">
<div class="text">
<p>Your text here</p>
</div>
</div>
</body>
</html>
```
其中,通过创建一个 `.container` 容器来包含图片和文字,使用相对定位和 `transform` 属性来让文字垂直居中显示在图片上方。通过给 `.container` 和 `img` 元素设置 `display: inline-block` 和 `width: 100%`,来让容器和图片宽度自适应。使用 `opacity` 属性来控制文字的显示和隐藏,并使用 `transition` 属性来实现平滑过渡。您只需要将 `your-image-url` 替换为您自己的图片链接,`your-image-description` 替换为您自己的图片描述,`Your text here` 替换为您自己的文字即可。