JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<div id="productimage"></div>
<a href="#" id="pause">Pause</a>

CSS

#productimage {
    position:absolute;
    height: 550px;
    width: 393px;
    /*background-image: url("../img/blusen.jpg");*/
    background-image: url("http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg");
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-color: #fff;
    background-size:396px 600px;
    top:191px;
    left:10px;    
}
#productimage.step1 {
    -webkit-transition: all 2.5s ease-in-out;
    -moz-transition: all 2.5s ease-in-out;
    -o-transition: all 2.5s ease-in-out;
    background-size:1500px 2275px !important;    
}

JavaScript

var image = $("#productimage");
    $("#pause").click(function (e) {
        e.preventDefault();
        if(!image.hasClass('step1'))
        {
            image.addClass('step1');
        }
        else {
            var css = image.css("background-size");
            image.css({'background-size': css});
            image.removeClass('step1');
        }
    });