JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div id="frame-wrap">
  <div class="imagen"></div>
 </div>

CSS

#frame-wrap{
	width: 533px;
	overflow: hidden;
}
.imagen{
	background:url(http://larealpari.com/_/img/foto2.jpg) 0 0 repeat-x;
	height: 300px;
}

JavaScript

$(document).ready(function() {
    $('.imagen').mouseenter(function(){
        var numero = -535;
        var suma;
        for (var i = 1; i <= 10; i++) {
            $(this).css({'backgroundPosition': suma+"px 0px"}, "-10");
            suma = numero * i;
        }
    }
});