JSFiddle - React, Tailwind, and code Playground

by 517Design

HTML

<div class="screen">
  <div style="background-image:url(http://themes.leap13.com/wiz/wp-content/uploads/2014/10/restaurant-wiz1.jpg);"></div>
 </div>

CSS

.screen {
background-image: url('http://2017.517design.com/wp-content/uploads/2017/02/517-design-iphone-7-scroll-compressor.png');
background-size: contain;
background-repeat: no-repeat;
padding: 12% 3%;
height:100%;
width:100%;

position: relative;

text-decoration: none;
}
.screen div {
background-size: cover;
padding: 61% 7% 0% 1%;
width: 27%;
background-position: center top;
  -webkit-transition: all 5s;
  -moz-transition: all 5s;
  -ms-transition: all 5s;
  -o-transition: all 5s;
  transition: all 5s;
}
.screen:hover div {
 background-position: center bottom;
  -webkit-transition: all 4s;
  -moz-transition: all 4s;
  -ms-transition: all 4s;
  -o-transition: all 4s;
  transition: all 4s;
}