JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.greensock.com/js/1.8/TweenMax.min.js"></script>
<div id="container">
    <div class="inner">
        <div class="desc">Milo went to the wood. He took a fun ride and never came back</div>
        <div class="title">Faithful<strong>Milo</strong></div>
        <!--img class="photo" src="http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg" /-->
        <div class="photo"></div>
    </div>
</div>

CSS

#container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: -0.135em;
    width: 450px;
    height: 350px;
    text-align: center;
    cursor: pointer;
    background: #2e5d5a;
}

#container .photo {
    height: 400px;
    width: 500px;
    left:-5%;
    top:-20px;
    position: relative;
    background:url('http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg') no-repeat center center;
    
}

.desc {
    font-size: 14px;
    top: 60px;
    width: 210px;
    text-align: right;
    left: 20px;
    padding-right: 10px;
    border-right: 1px solid;
    opacity:0;
}

.title {
    font-size:30px;
    bottom: 20px;
    right: 40px;
}

.desc,
.title {
    position: absolute;  
    z-index:2;
    color: #ffffff;
    font-family: Arial;
    text-transform: uppercase;
}

JavaScript

//window.onload = function() {
                
    var photo = $("#container .photo");
    var desc = $("#container .desc");
    var inner = $("#container .inner");
    
    var myTween = new TweenLite(
        photo,
        0.3,
        {scale:0.95, opacity:0.5, paused: true}
    )

    var myTween2 = new TweenLite(
        desc,
        0.3,
        {x:10, y:-20, opacity:1, paused: true}
    )
    
    inner.hover(
        function () {
            myTween.play();
            myTween2.play();
        }, 
        function () {
            myTween.reverse();
            myTween2.reverse();
        }
    );
    
    inner.mouseOut
    
//}