JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
  <div class="box box1"></div>
  <div class="box box2">
    <div class="div"></div>
  </div>
</div>

CSS

div.body {
  width: 800px;
  height: 300px;
  margin: auto;
  overflow: hidden;
}
div.box {
  width: 50%;
  height: 300px;
  float: left;
  background: url(https://picsum.photos/400/300) no-repeat;
  background-position: center;
  position: relative;
}
div.box1 {
  animation: a 1s ease-out ;
}
div.div {
  position: absolute;
  width: 100%;
  height: 80px;
  background: white;
  animation: a 1s ease-out;
  top: -80px;
}
div.box2 {
  animation: a .7s ease-in ;
}
@keyframes a {
  from { transform: translateY(80px);}
  to { transform: translateY(0);}
}