如何实现hover时图片在父div内向右扩展而非向左的效果

解决方案 #

核心原因：你当前直接修改height实现放大效果时，图片宽度会等比自动增加，加上你给图片设置了right: 16px定位，图片右边缘始终和容器右侧保持固定距离，所以宽度增加时只能向左侧延伸，也就是你现在看到的向左扩展的效果。

修改方案很简单，改用transform实现缩放，同时控制缩放的基点即可，调整后的完整代码如下：

CSS代码

#background {
  border-radius: 0px 25px 25px 0px;
  cursor: pointer;
  width: 250px;
  height: 300px;
  border: 3px solid black;
  border-right: 2px solid black;
  position: relative;
  /* 如果不需要图片放大后超出容器显示，就加下面这行，不需要可以删掉 */
  overflow: hidden;
}
#desc{
  border-radius: 0px 0px 22px 0px;
  background: rgba(190, 190, 190, 0.7);
  background-repeat: repeat;
  width: 100%;
  left: 0px;
  height: 50px;
  bottom: 0px;
  position: absolute;
  z-index: 2;
}
#man{
  height: 100%;
  width: auto;
  position: absolute;
  transition: all 0.4s ease;
  bottom: 0;
  /* 调整这个数值，直到初始状态下图片右边缘距离容器右侧16px即可 */
  left: 114px;
  /* 设置缩放基点为左下角，放大时会向右上方扩展 */
  transform-origin: left bottom;
}
#man:hover{
  /* 用transform替代修改height，性能更好，也能控制扩展方向 */
  transform: scale(1.08);
}

HTML代码

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="background" style="background: url(paper.gif); background-size: cover;">
  <img id="man" src="https://www.watertankfactory.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" />
  <div id="desc"></div>
</div>
</body>
</html>

只需要把原来img标签行内样式里的right:16px删除即可。如果需要调整放大比例，直接修改scale的参数就行。

内容的提问来源于stack exchange，提问作者kfir ezer