鼠标移入放大图片,不影响文字
时间: 2024-05-18 11:11:07 浏览: 82
鼠标移入图片放大
5星 · 资源好评率100%
您可以通过使用CSS来实现鼠标移入放大图片的效果,并且不影响文字。您可以将以下代码添加到您的CSS文件中:
```css
.image-container {
position: relative;
display: inline-block;
}
.image-container:hover .image {
transform: scale(1.2);
z-index: 1;
}
.image {
transition: transform 0.3s ease;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
```
在HTML中,您可以使用以下代码来设置图片和文本:
```html
<div class="image-container">
<img class="image" src="path/to/your/image.jpg" alt="Your Image">
<div class="text">Your Text</div>
</div>
```
这样,当鼠标移入图片时,图片会放大,但文本不会受到影响。
阅读全文