JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<div class="tile">
<div class="tileImage"></div>
</div>
<div class="tile">
<div class="tileImage"></div>
</div>
<div class="tile">
<div class="tileImage"></div>
</div>
CSS
.tile {
width: 300px;
height: 140px;
overflow: hidden;
}
.tileImage {
width: 300px;
height: 140px;
background-image: url(http://www.snorkl.tv/dev/gsap12.jpg);
background-position: center center;
}
body{
background-color:black;
}
JavaScript
$('.tileImage').hover(
function() {
TweenMax.to(this, .2, {css: {scaleX: 1.2, scaleY: 1.2},ease: Circ.easeOut,delay:0.1});
}, function() {
TweenMax.to(this, .2, {css: {scaleX:1, scaleY:1},ease: Circ.easeOut});
});