<ul id="ul"></ul>

#ul{
  width: 90%;
  height: 500px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background: url(https://cs9.pikabu.ru/post_img/2018/03/19/10/og_og_1521478669213611400.jpg);
  background-size: cover;

}

li{
  background: #ccc;
  width: 0%;
  transition: 0.6s cubic-bezier(0,1.7,.64,.6);
  overflow: hidden;
  background: url(https://avatars.mds.yandex.net/get-pdb/215709/a5c79f6f-0f66-4b21-92d6-8de90d6ea5d5/s1200?webp=false);
  background-attachment: fixed;
  background-size: cover;
}

#ul:hover li{
  width: 100%;
}

let i=0, out="", sec = 0.01, uh = 500, coof = 50;

while (i<coof) {
 i++;
 out += `<li></li>`;
}

ul.innerHTML = out;
document.querySelector("#ul").style.height = uh+"px";
document.querySelectorAll("#ul li").forEach(function (el,index) {
  el.style.transitionDelay = `${sec * index}s`;
  el.style.height = uh/coof+"px";
})