JSFiddle - React, Tailwind, and code Playground

by Max Lensky

HTML

<div class="b1"> 
   <img src="http://www.worthytoshare.net/wp-content/uploads/2014/03/8876509-lily-pretty-girl.jpg" />
   <div class="b2"></div>
</div>

CSS

.b1,.b2,img{
  display:block;
  width:300px;
  height:200px;
  transition:.5s;
}
.b1{
  position:relative;
  overflow:hidden;
}
.b2{
  position:absolute;
  top:0; left:0;
  background:rgba(200,220,230,.5);
}
.b1:hover .b2{
  top:200px;
}