By adjusting the height of .div1 instead of simply scaling it, you can ensure that the rest of the page adjusts accordingly.
.transform {
background-color: slategray;
}
.transform:hover~.div1 {
height:0; padding-top:0; padding-bottom:0; /* make necessary adjustments to height and padding */
}
.div1 {
background-color: royalblue;
padding: 15px;
height: 200px;
transition: padding-top 2s, padding-bottom 2s, height 2s; /* apply animation to padding as well */
transform-origin: top center;
}
.div2 {
background-color: springgreen;
font-size: 20px;
}
img {
width:200px; height: 100%; vertical-align:top; /* additional 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>
I hope this solution is helpful!
Update: The problem has evolved based on comments from the OP. Here is a new snippet addressing the revised issue.
.transform {
background-color: slategray;
}
.transform:hover~.div1 {
transform: scaleY(0);
}
.transform:hover~.div2 {
top:-230px; /* Adjust div2 by moving it up by the combined height and 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; /* using relative positioning */
top: 0; /* Initial position remains the same */
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>