JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="bg"></div>
<button class="btn" data-quater="1">1</button>
<button class="btn" data-quater="2">2</button>
<button class="btn" data-quater="3">3</button>
<button class="btn" data-quater="4">4</button>

CSS

html, body{
  height:100%;
  overflow:hidden;
}
#bg{
  position:absolute;
  width:200%;
  height:200%;
  left:0;
  top:0;
  background-image:url('https://i.ytimg.com/vi/UZ1Q3KL65s0/maxresdefault.jpg');
  background-size:cover;
  transform: translate3d(0,0,0);
  transition:transform 1s ease;
}
#bg.q-1{
  transform: translate3d(0,0,0);
}
#bg.q-2{
  transform: translate3d(-50%,0,0);
}
#bg.q-3{
  transform: translate3d(-50%,-50%,0);
}
#bg.q-4{
  transform: translate3d(0,-50%,0);
}
.btn{
  position:relative;
}

JavaScript

var bg = document.getElementById('bg');
document.body.addEventListener('click', function(e){
	var target = e.target;
  if(target.classList.contains('btn')){
  	bg.className = 'q-' + target.getAttribute('data-quater');
  }
});