css图片鼠标放上面边大代码

今天我们来聊一下如何在CSS中实现鼠标放到图片边缘时，让图片变大的效果。具体的实现方法是利用CSS中的:hover伪类和transform属性来实现的。 首先，在HTML中我们需要先放置一张图片。例如：

这是一个美丽的图片：

然后，在CSS中，我们需要使用以下代码来实现图片放大效果：

img:hover {
  transform: scale(1.1);
  transition: transform .2s;
}

当我们把鼠标放到图片上时，这个伪类就会生效，图片会放大1.1倍。同时，我们还可以添加过渡效果（transition），使图片变化时更加平滑。 如果你想让图片只在特定的一侧放大，可以使用以下代码：

img:hover {
  transform: scaleX(1.1);
  transition: transform .2s;
}

/* 如果要放大下面或右侧的边，只需要把scaleX换成scaleY即可 */
img:hover {
  transform: scaleY(1.1);
  transition: transform .2s;
}

如此，我们就可以在CSS中实现图片鼠标放上变大的效果啦！