css3鼠标悬停折叠图片展开
时间: 2023-06-08 09:05:37 浏览: 82
答案:
您可以使用CSS3的:hover伪类选择器来实现鼠标悬停折叠图片展开的效果。您需要设置该元素的初始状态,然后使用:hover选择器来设定鼠标悬停时的样式。以下是一个示例代码:
HTML代码:
```
<div class="image-container">
<img src="image.jpg">
<div class="overlay">
<p>This is some text that appears over the image on hover</p>
</div>
</div>
```
CSS代码:
```
.image-container {
position: relative;
width: 300px;
height: 200px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
opacity: 0;
transition: opacity 0.5s;
}
.image-container:hover .overlay {
opacity: 1;
}
.image-container img {
width: 100%;
height: auto;
vertical-align: middle;
}
```
解释:这个示例中,我们使用了一个div元素来包含我们的图像,并添加了一个.overlay元素用于在悬停时显示文字。.overlay元素的初始状态设置为透明度为0,当鼠标悬停在.image-container元素上时,触发:hover选择器,将.overlay元素的透明度设置为1,从而实现文字显示的效果。