JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<p>rollover image (grayscale effect snaps, doesn't tween)</p>
<div class="box">
    <div  id="demo"><img src="http://placekitten.com/1000/1000" /></div>
</div>

CSS

p{margin:10px;}
.box {
    position:relative;
    width:50px;
    height:50px;
    background-color:red;
    margin:10px;
    overflow:hidden;
}

#demo{
position:absolute;
    left:-10px;
    top:-10px;
    cursor:pointer;
}

JavaScript

//chrome ONLY!


var demo = $("#demo"),
    tween;

tween = TweenMax.fromTo(demo, .5, {
    css: {
        scale: .75,
        webkitFilter: "grayscale(1)"
    }
}, {
    css: {
        scale: 1,
        webkitFilter: "grayscale(0)"
    },
    paused: true,
    immediateRender: true
});



demo.mouseover(function() {
    tween.play();
})

demo.mouseout(function() {
    tween.reverse();
})