JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<div class="borderz">
    <div class="overlay"></div>
    <img src="http://wpluxe.com/wp/wp-content/uploads/2008/11/wp-realtor.jpg" />
</div>

CSS

.borderz { position:relative; width:275px; height:200px; background:Red; overflow:hidden; }
.borderz > img {  margin-top:0px; transition: all 1800ms ease-in; width:275px; height:auto; }

.borderz:hover > img {  margin-top: -194px; transition: all 1800ms ease-in; width:275px; height:auto; }


.borderz > .overlay { position:absolute; left:0; top:0; width:275px; height:200px; background:rgba(0,0,0,0.1); transition: all 1800ms ease-in;}



.borderz:hover > .overlay { position:absolute; left:0; top:0; width:275px; height:200px; background:rgba(0,0,0,0.7); transition: all 1800ms ease-in;}