CSS过渡与固定底部向外生长

Question

我有一个图标，我希望它在滚动时增长。

我希望这个图标按比例向上、向左和向右扩展，所以它的底部中心位置需要保持固定在它开始的位置。

我想用纯CSS，而不是JS。

我可以让它以各种方式展开，但它们都能让整个物体向上或向下移动。

这就是我正在做的事情，任何帮助都将非常感激。

#sm-image {
  width: 20px;
  height: 20px;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#sm-image:hover {
  width: 36px;
  height: 36px;
  top: -10px;
  left: -10px;
  bottom: 0;
  margin-right: -10px;
  margin-bottom: 0;
}

<img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg"></img>
<div style="width:100%;background-color:red;height:2px;"></div>

提前感谢。

JSFiddle

Answer 1

您可能需要考虑绝对定位图标并将其包装在相对定位的容器中。下面是基本框架:

#icon-container {
  width: 36px;
  height: 36px;
  border: 1px dashed red;
  position: relative;            /* 1 */
}
#sm-image {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;                      /* 2 */
  left: 50%;                      /* 3 */
  transform: translateX(-50%);    /* 4 */
  transition: width .5s, height .5s;
}
#sm-image:hover {
  width: 36px;
  height: 36px;
}

<div id="icon-container">
  <img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
</div>
<div style="width:100%;background-color:red;height:2px;"></div>

https://jsfiddle.net/aub9amy0/3/

指出:

1. 为绝对定位子
建立边界框(最近定位祖先)
2. 保持图标固定在容器底部
3. 保持图标水平居中
4. 水平定心微调

Answer 2

而不是改变width &height并尝试在过程中重新定位元素，您可以使用scale() transform-function并将transform-origin设置为底部中心。

#sm-image{
  width:20px;
  height:20px;
  transform-origin:50% 100%;
  transition:transform .5s;
}
#sm-image:hover{
  transform:scale(1.25);
}

<img id="sm-image" src="https://pbs.twimg.com/profile_images/506394721812373504/IDmMstyJ.jpeg">
<div style="width:100%;background-color:red;height:2px;"></div>