JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="tile">
  <div class="photo"></div>
</div>

CSS

body { margin: 0; }

.tile {
  position: absolute;
  width: 33.333%;
  height: 100%;
  overflow: hidden;
}

.photo {
  width: 100%;
  height: 100%;
  background-image: url("http://ultraimg.com/images/hzQ2IGW.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .5s ease-out;
}

JavaScript

$('.tile')
	.on('mouseover', function(){
      $('.photo').css({'transform': 'scale(1.6)'});
    })
    .on('mouseout', function(){
      $('.photo').css({'transform': 'scale(1)'});
    })
    .on('mousemove', function(e){
      $('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    })