html - 改变比例并调整外部内容

Question

I got a div and I need it to scale between 0 and 1, but the later content stays in the same place. How do I increase the div, and modify the content around it?
JSFiddle link

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  height: 200px;
}

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

Answer 1

如果您更改 .div1 的高度而不是缩放它，页面的其余部分将适应它。

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  height:0; padding-top:0; padding-bottom:0; /* need to adjust height and padding */
}

.div1 {
  background-color: royalblue;
  padding: 15px;
  height: 200px;
  transition: padding-top 2s, padding-bottom 2s, height 2s; /* animate the padding too */
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
}

img {
  width:200px; height: 100%; vertical-align:top; /* and some adjustments here */
}

<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>

希望这有帮助!

---

编辑:OP 的评论现在已经改变了问题，所以这里有一个新的代码片段来解决这个问题。

.transform {
  background-color: slategray;
}

.transform:hover~.div1 {
  transform: scaleY(0);
}

.transform:hover~.div2 {
  top:-230px;             /* Move div2 up by the height+padding of div1 */
}

.div1 {
  transform: scaleY(1);
  background-color: royalblue;
  padding: 15px;
  transform: scaleY(1);
  transition: transform 2s;
  transform-origin: top center;
}

.div2 {
  background-color: springgreen;
  font-size: 20px;
  position: relative;  /* use relative positioning */
  top: 0;              /* Initial position is where it normally is */
  transition: top 2s;
}

img {
  height: 200px;
  vertical-align:top;
}

<div style="margin-top: 300px">TEXT</div>
<div class="transform">TRANSFORM</div>
<div class="div1">
  <img src="https://via.placeholder.com/500">
</div>
<div class="div2">
  <span>TEXT</span>
</div>