JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demopage-preview_item">
<p>&nbsp;</p>

<div class="demopage-preview_inner demopage-img demopage-img_1" style="background-image: url(http://lorempixel.com/200/200/)"></div>

</div>

CSS

.demopage-preview_item {
display: block;
height: 480px;
width: 100%;
margin: 0 auto;
padding: 5% 6% 23% 5%;
background: url(http://lorempixel.com/600/600/) no-repeat;
background-size: cover;
position: relative;
z-index: 10;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.demopage-preview_inner {
height: 100%;
width: 100%;
position: relative;
display: block;
overflow: hidden;
}

.demopage-preview_inner:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all .1s;
}


.demopage-preview_inner:hover:after {
box-shadow: inset 0 0 11px 2px white;
}

.demopage-preview_inner img {
left: 0;
position: absolute;
top: 0;
transition: all 4s ease 0s;
width: 100%;
}

.demopage-img {
background-position: 0 0;
transition: all 4.5s;
background-size: cover;
margin-top: -2.9em;
}


.demopage-img:hover {
background-position: 0 100%;
}