html鼠标放在图片上时，图片匀速变大，超出div的部分会被隐藏

这可以通过CSS中的`hover`和`transform`属性来实现。具体的代码如下所示：

<div class="container">
  <img src="your-image-src" alt="your-image" class="image">
</div>

.container {
  width: 300px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  overflow: hidden; /* 超出部分隐藏 */
  position: relative; /* 相对定位 */
}

.image {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.container:hover .image {
  transform: scale(1.2); /* 鼠标悬停时放大图片 */
}

其中，`.container`是图片的容器，`.image`是图片本身。通过设置容器的`width`和`height`属性，可以确定容器的大小，从而控制图片的显示区域。通过在容器上设置`overflow: hidden`，可以隐藏超出容器范围的部分。通过将图片设置为绝对定位，并设置`top`、`left`、`width`和`height`为100%，可以让图片充满整个容器。最后，在鼠标悬停时，通过设置`transform`属性为`scale(1.2)`，让图片放大1.2倍。同时，添加了过渡效果，使得图片放大的过程更加平滑。