鼠标移入div放大指针部分图片
时间: 2023-10-05 12:04:33 浏览: 153
您可以使用CSS的:hover伪类和transform属性来实现鼠标移入div放大指针部分图片的效果。以下是一个示例代码:
HTML代码:
```
<div class="container">
<img src="image.jpg" alt="Image">
</div>
```
CSS代码:
```
.container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.container:hover img {
transform: scale(1.2);
transform-origin: 50% 50%;
}
```
在上面的代码中,我们使用了一个容器div来包含图片。容器设置了一个固定的宽度和高度,并使用overflow:hidden属性来隐藏图片超出容器的部分。图片使用了绝对定位,覆盖在容器的顶部。然后,我们使用transform属性和:hover伪类来为图片添加放大效果。当鼠标悬停在容器上时,图片将以50%的缩放中心点放大1.2倍,过渡效果设置为0.5秒。
阅读全文