如何用CSS实现HTML背景图片hover时放大效果

要实现背景图hover时的放大效果，你需要给.img-div添加过渡动画并明确其高度（避免height:100%因父元素高度不确定导致的问题），具体修改如下：

修改后的CSS代码 #

.ver-thin {
  display: flex;
  flex-direction: column;
  gap: var(--thin-gap); /* 约50px */
  /* 可选：如果需要让整个容器有固定高度，可添加 */
  /* height: 500px; */
}

.img-div {
  width: 100%;
  /* 给图片容器设置固定高度，或者根据需求用flex占比 */
  height: 300px;
  background-position: center;
  background-size: cover;
  /* 添加过渡动画，让放大效果更平滑 */
  transition: background-size 0.3s ease;
}

/* hover时放大背景图 */
.img-div:hover {
  background-size: 120%;
}

关键说明 #

• 设置明确高度：.img-div原本的height:100%依赖父元素的高度，如果父元素.ver-thin没有指定高度，容器高度会塌陷，背景图显示范围不足，导致放大效果不明显。给.img-div设置固定高度（如300px）或用flex:1让它占满父元素剩余空间，确保背景图有足够的显示区域。
• 过渡动画：transition属性让背景图的尺寸变化更自然，避免突兀的放大效果。
• hover状态设置：将background-size从cover改为更大的百分比（如120%），配合background-position:center，就能实现图片居中放大的效果。

如果需要让整个.ver-thin容器的高度自适应，也可以给.img-div使用aspect-ratio来维持图片比例，示例如下：

.img-div {
  width: 100%;
  aspect-ratio: 16/9; /* 根据你的图片比例调整 */
  background-position: center;
  background-size: cover;
  transition: background-size 0.3s ease;
}

这样既保证了图片容器的比例，又能让hover放大效果正常展示。

内容的提问来源于stack exchange，提问作者Sergio Oliveira