css鼠标滑过图片放大
时间: 2023-07-25 21:16:08 浏览: 104
CSS3实现鼠标滑过图片放大特效源码.zip
要实现鼠标滑过图片放大的效果,可以使用CSS的:hover伪类和transform属性。具体实现步骤如下:
1. 给图片设置一个初始尺寸和过渡效果:
```css
img {
width: 200px;
height: 200px;
transition: transform 0.3s ease-out;
}
```
2. 当鼠标滑过图片时,将图片放大:
```css
img:hover {
transform: scale(1.2);
}
```
其中,scale(1.2)表示放大到原来的1.2倍。
完整的CSS代码如下:
```css
img {
width: 200px;
height: 200px;
transition: transform 0.3s ease-out;
}
img:hover {
transform: scale(1.2);
}
```
这样,当鼠标滑过图片时,图片就会平滑地放大。
阅读全文