如何实现hover切换图片时带平滑过渡及第二张图片放大效果？

实现方案 #

你可以直接使用以下CSS代码适配你现有的HTML结构，即可完成目标效果：

/* 外层容器样式 */
.image-wrapper {
  position: relative;
  width: 400px; /* 可按需调整容器尺寸 */
  height: 500px; /* 可按需调整容器尺寸 */
  overflow: hidden;
  cursor: pointer;
}

/* 两张图片容器通用样式 */
.primary-image, .secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 配置过渡动画时长和缓动效果，可按需调整0.4s参数修改速度 */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* 图片通用适配样式，避免变形 */
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 默认状态配置 */
.primary-image {
  opacity: 1;
  z-index: 1;
}
.secondary-image {
  opacity: 0;
  transform: scale(0.95); /* 初始缩小，hover时放大实现zoom in效果 */
  z-index: 2;
}

/* hover状态配置 */
.image-wrapper:hover .primary-image {
  opacity: 0;
}
.image-wrapper:hover .secondary-image {
  opacity: 1;
  transform: scale(1);
}

核心逻辑说明 #

• 层级控制：副图默认层级高于主图，显示时直接覆盖主图，无需额外的显示隐藏逻辑
• 过渡配置：同时对透明度、缩放两个属性加过渡效果，自然实现淡入淡出+放大的同步动画
• 溢出处理：外层容器添加overflow: hidden，避免图片放大时超出容器边界，保持样式整洁

内容的提问来源于stack exchange，提问作者Viral Thaker