实现图片圆形显示及hover时放大至完整显示的效果

下面是用HTML+CSS实现该效果的代码，完全满足初始圆形小图展示、鼠标悬停时圆形区域平滑放大至完整显示图片的需求：

<div class="image-box">
  <img src="你的图片路径" alt="自定义图片描述">
</div>

/* 初始容器样式：小尺寸圆形裁剪 */
.image-box {
  width: 140px;
  height: 140px;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 初始圆形裁剪，圆心在中心 */
  clip-path: circle(50% at center);
  transition: clip-path 0.6s ease-in-out, transform 0.6s ease-in-out;
}

/* 悬停时的变化：圆形区域放大，容器同步放大到完整图片尺寸 */
.image-box:hover {
  width: 320px; /* 这里设置成你图片的实际宽度 */
  height: 320px; /* 对应图片实际高度 */
}

.image-box:hover img {
  /* 圆形裁剪半径放大到足够覆盖整个容器，显示完整图片 */
  clip-path: circle(160% at center);
  /* 可选：图片轻微放大，避免边缘留白 */
  transform: scale(1.1);
}

关键实现说明 #

• 用clip-path: circle()精准控制圆形裁剪区域，初始半径50%形成正圆形，悬停时将半径设为160%（大于容器对角线长度），就能完全展示整张图片
• 容器的宽高过渡动画配合图片的裁剪区域变化，实现平滑的放大效果
• object-fit: cover保证图片在容器内填充时不会变形，始终保持比例
• 调整transition的时长和曲线，可以控制动画的快慢和流畅度

内容的提问来源于stack exchange，提问作者Alex Dan