JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="box">
    <div  id="demo"><img src="http://www.wrensoft.com/zoom/demos/fruitshop/images/red_delicious_apple.jpg"/></div>
</div>

CSS

.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
    }
}, {
    css: {
        scale: 1
    },
    paused: true,
    immediateRender: true,
    onUpdate: grey,
    onUpdateParams: ["{self}"]

});


function grey(t) {
    TweenLite.set(demo, {
        css: {
            webkitFilter: "grayscale(" + (1 - t.progress()) + ")"
        }
    });

}



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

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