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/400/200/)"></div>

</div>

CSS

.demopage-preview_item {
display: block;
height: 480px;
width: 100%;
margin: 0 auto;
padding: 4% 4.5% 23% 4.5%;
background: url(http://www.imaginariaweb.com/images/apple_thunderbolt_display.png) no-repeat;
background-size: 100% auto;
position: relative;
z-index: 10;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.demopage-preview_inner {
positio: relative;
height: 50vw;
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: background-position 4.5s;
background-size: cover;
margin-top: -2.9em;
}


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