JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<div img-hover data-src="http://localaac.com:9191/academy/image/carousel/?name=image1" data-h="320px">
</div>

after

CSS

[img-hover] {
  background: white;
  background-size: cover;
}
[img-hover].zoomed {
  background-size: initial;
}

JavaScript

$('[img-hover]').each(function() {
  var el = $(this);
  var dataset = this.dataset;
  var boundingRect;
  
  console.log(el, dataset);
  
  el.css({
  	backgroundImage: 'url(' + dataset.src + ')',
    height: dataset.h,
    width: dataset.w
  });
  
  el.on('mouseenter', function(e) {
  	el.addClass('zoomed');
    boundingRect = el[0].getBoundingClientRect();
    console.log(boundingRect);
  })

	el.on('mousemove', function(e) {
	  console.log(e)
    /*
    var pctX = e.offsetX / boundingRect.width;
    var bgPctX = pctX * ((imageW - boundingRect.width) / imageW)
    el.css({
    	backgroundPositionX:
    })
    */
  
  })
  
  el.on('mouseleave', function(e) {
  	el.removeClass('zoomed')
  })
  
  

})