JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">  
       <div class="wrap">
                <a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
                    <img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image1.jpg" alt="Picture 1"/>
                </a>
            </div>
            <div class="wrap">
                <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
                    <img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image2.jpg" alt="Picture 2"/>
                </a>
            </div>
            <div class="wrap">
                <a href="http://www.flickr.com/photos/62337512@N00/445175934/">
                    <img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image3.jpg" alt="Picture 3"/>
                </a>
            </div>
            <div class="wrap">
                <a href="http://www.flickr.com/photos/brunociampi/2461177417/">
                    <img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image4.jpg" alt="Picture 4"/>
                </a>
            </div>
            <div class="wrap">
                <a href="http://www.flickr.com/photos/beadmobile/3298460491/">
                    <img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image5.jpg" alt="Picture 5"/>
                </a>
            </div>
            <div class="wrap">
                <a href="http://www.flickr.com/photos/tonythemisfit/3839281139/">
                    <img src="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/images/image6.jpg" alt="Picture 6"/>
                </a>
            </div>
</div>

CSS

.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap a img{
    border:none;
    position:absolute;
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
}

JavaScript

document.id('container').getElements('img').addEvents({
    mouseenter: function(){
        this.get('morph').cancel().start({
            opacity: 1,
            height: 200,
            top: 0,
            left: 0            
        });
    },
    mouseleave: function(){
        this.get('morph').cancel().start({
            opacity: 0.5,
            height: 500,
            top: -66.5,
            left: -150         
        });        
    }
});