html鼠标悬停图片,图片向上滑动且出现另一张图片
时间: 2023-08-31 15:41:18 浏览: 68
可以使用CSS的transition和transform属性来实现图片向上滑动的效果,同时使用position和z-index属性来控制另一张图片的显示。
具体步骤如下:
1. 在HTML中,使用`<div>`标签包裹需要显示的两张图片,并设置一个`class`属性,用于后面的CSS样式选择器。其中,第二张图片先设置为不可见。
```
<div class="image-container">
<img src="image1.jpg" class="hover-image">
<img src="image2.jpg" class="top-image">
</div>
```
2. 在CSS中,选择需要添加鼠标悬停特效的图片,并设置`hover`伪类。同时,使用transition和transform属性来实现图片向上滑动的效果。
```
.hover-image:hover {
transform: translateY(-50%);
transition: transform 0.5s ease;
}
```
3. 在CSS中,设置第二张图片的样式。使用position属性将其设置为绝对定位,并使用z-index属性将其置于第一张图片上方。同时,使用opacity属性将其设置为可见状态。
```
.top-image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transition: opacity 0.5s ease;
}
.hover-image:hover + .top-image {
opacity: 1;
}
```
这样,当鼠标悬停在第一张图片上时,它就会向上滑动,并显示出第二张图片。