In the current setup, .div1 is positioned 50px above the bottom of the video frame. My goal is to make it so that when .div2 (the controls bar) disappears, .div1 smoothly moves down and sticks to the new bottom position.
I envision this functionality similar to how Netflix's video player handles subtitles - when the controls bar vanishes, the subtitles should gracefully slide down to the bottom of the screen. This is the effect I want to achieve. Test
body {
background-color: gray;
margin: 0 auto;
}
.out {
width: 1000px;
position: relative;
height: 560px;
background-color: #000;
left: 50%;
margin-left: -500px;
top: 50%;
margin-top: -280px;
}
.div1 {
width: 100%;
height: 50px;
background-color: red;
position: absolute;
bottom: 50px;
}
.div2 {
width: 100%;
height: 50px;
background-color: blue;
position: absolute;
bottom: 0;
}<div class="out">
<div class="div1"></div>
<div class="div2"></div>
</div>