css鼠标触碰图片后自动放大一点 并且图片居中
时间: 2023-06-06 07:04:28 浏览: 161
可以使用CSS中的:hover伪类和transform属性来实现该效果。具体的代码可以参考下面的示例:
HTML代码:
```html
<div class="image-container">
<img src="your-image-url" alt="your-image-description">
</div>
```
CSS代码:
```css
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 200px;
height: 200px;
transition: transform 0.3s ease-in-out;
}
img:hover {
transform: scale(1.1);
}
```
其中,.image-container用于将图片居中显示,img则表示要进行缩放的图片。通过:hover伪类,对img元素应用transform: scale(1.1),以实现鼠标触碰图片后自动放大的效果。
阅读全文