JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="body">
  <div class="body">
    <div class="box">
      <div class="cube" data-px="25"></div>
    </div>
     <div class="box">
      <div class="cube" data-px="50"></div>
    </div>
     <div class="box">
      <div class="cube" data-px="75"></div>
    </div>
     <div class="box">
      <div class="cube" data-px="100"></div>
    </div>
  </div>
  <div id="img"></div>
</div>

CSS

div#body {
  position: relative;
  padding: 50px 0;
  overflow: hidden;
}

div#body:after {
  content: '';
  display: table;
  clear: both;
}
div.box {
  width: 25%;
  z-index: 2;
  position: relative;
  float: left;
}
#img {
  width: 100%;
  top: 0;
  position: absolute;
  height: calc(100% + 100px);
  background: url(http://picsum.photos/1200/900) no-repeat;
  background-size: cover;
  background-position: center;
  transition: 1s;
}
div.cube {
  width: 100px;
  height: 100px;
  margin: auto;
  background: blue;
}

JavaScript

var a = document.querySelectorAll('.cube');


for (var i = 0; i < a.length; i++) {
	a[i].addEventListener('mouseover',function(){
  		document.querySelector('#img').style.transform = 'translateY(-' + this.dataset.px + 'px)';
			console.log(this.dataset.px);
	})
}