JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="container">
  <div>
    <img src="http://placehold.it/300x300.png">
  </div>
</div>

CSS

#container {
  width:300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

#container div:before {
  content: " ";
  background: rgba(50,0,0,0.3);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 125px;
  -webkit-transition: top 0.25s, left 0.25s;
  transition: top 0.25s, left 0.25s;
}

#container:hover div:before {
  top: -125px;
  //left: -300px;
}

#container div:after {
  content: " ";
  background: rgba(0,0,50,0.3);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 125px;
  -webkit-transition: bottom 0.25s, left 0.25s;
  transition: bottom 0.25s, left 0.25s;
}

#container:hover div:after {
  bottom: -125px;
  //left: 300px;
}