JSFiddle - React, Tailwind, and code Playground

by hakim

HTML

<div class="gallery-thumb">
    <img src="http://placekitten.com/200/200" width="200" height="200">
    <img src="http://placekitten.com/200/201" width="200" height="200">
    <img src="http://placekitten.com/200/202" width="200" height="200">
    <img src="http://placekitten.com/200/203" width="200" height="200">
    <img src="http://placekitten.com/200/204" width="200" height="200">
    <img src="http://placekitten.com/200/205" width="200" height="200">
    <img src="http://placekitten.com/200/206" width="200" height="200">
    <img src="http://placekitten.com/200/207" width="200" height="200">
    <img src="http://placekitten.com/200/208" width="200" height="200">
</div>

CSS

.gallery-thumb {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 40px auto;
    
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
}

.gallery-thumb img {
    position: absolute;
    border: 5px solid white;
    box-shadow: 0px 0px 1px rgba( 0, 0, 0, 0.8 );

    -webkit-transition: all 0.3s ease;
}

.gallery-thumb:hover img  {
    -webkit-transform: translateX( -60% ) rotateY( 60deg ) translateZ(-80px);
}

.gallery-thumb:hover img.present  {
    -webkit-transform: none;
    margin: 0!important;
}

.gallery-thumb:hover img.present ~ img {
    -webkit-transform: translateX( 82% ) rotateY( 48deg );
    /*-webkit-transform: translateX( 80% ) rotateY( -40deg ) translateZ(-80px);*/
}



html {
    width: 100%;
    height: 100%;
    
    background: rgb(122,188,255);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
}

JavaScript

(function(){

    var thumbs = document.querySelectorAll( '.gallery-thumb' );
    
    [].slice.call( thumbs ).forEach( function( thumb, i ) {

        thumb.addEventListener( 'mouseover', function( event ) {

            [].slice.call( thumb.children ).forEach( function( image, offset ) {
                
                image.style.marginLeft = ( offset * 2 ) + 'px';

            } );
            
        } );
        
        thumb.addEventListener( 'mousemove', function( event ) {

            var index = Math.floor( ( event.clientX - thumb.offsetLeft ) / thumb.offsetWidth * ( thumb.children.length - 1 ) );
            
            [].slice.call( thumb.children ).forEach( function( image, imageIndex ) {
                
                image.className = imageIndex === index ? 'present' : '';
                //image.style.zIndex = imageIndex > index ? thumb.children.length - imageIndex : 'initial';

            } );
            
        } );

        thumb.addEventListener( 'mouseout', function( event ) {

            [].slice.call( thumb.children ).forEach( function( image, offset ) {
                
                image.style.marginLeft = 0;

            } );
            
        } );
        
    } );

})();