给我html编程语言实现鼠标移动到一个img图片上那个图片自动消失,在原来的位置上替换成一个文字说明,动画漂亮,代码少,简单,运行了能保证所有效果可以使用
时间: 2023-11-29 11:04:38 浏览: 48
好的,以下是一个简单的实现方式:
```html
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Effect</title>
<style type="text/css">
.container {
position: relative;
display: inline-block;
}
.container img {
display: block;
width: 300px;
height: 200px;
transition: opacity 0.3s ease-in-out;
}
.container:hover img {
opacity: 0;
}
.container:hover::before {
content: "这里是文字说明";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #fff;
transition: opacity 0.3s ease-in-out;
z-index: 1;
opacity: 1;
}
.container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<img src="your_image_url_here" alt="your_image_alt_here">
</div>
</body>
</html>
```
这段代码利用了CSS中的 `:hover` 伪类来实现当鼠标悬停在图片上时图片消失,同时使用 `::before` 伪元素来添加一个黑色的半透明背景和文字说明。通过调整伪元素的 `opacity` 属性,可以实现动画效果。
请将 `your_image_url_here` 和 `your_image_alt_here` 替换成您自己的图片链接和图片说明。