JSFiddle - React, Tailwind, and code Playground

by erackson

HTML

<div class="thumb">                                        
    <div class="mask">                                       
        <a href="#" title="Conheça mais do projeto">+</a>
    </div>                                        
</div>


<div class="big-wrapper">                    
    <div class="big-img">                        
        <img src="http://olharespriramos.com.br/nova_identidade/img/bigs/1.png" alt="" />
    </div>
    <a class="fechar" href="#" title="voltar">X</a>
</div>

CSS

.thumb {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 3px 4px 9px 0 #221E1D inset;
    -moz-box-shadow: 3px 4px 9px 0 #221E1D inset;
    -ms-box-shadow: 3px 4px 9px 0 #221E1D inset;
    box-shadow:3px 4px 9px 0 #221E1D inset;
    background: #6e6b6a;
    width: 212px;
    height:121px;
    float: left;
    margin: 3.5px 3px;
    overflow: hidden;
    position: relative;
}

.mask {
    width: inherit;
    height: inherit;
    background: url(http://olharespriramos.com.br/nova_identidade/img/mask-bg.png) repeat;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    position: relative;
    display: none;
}

.mask a {
    bottom: -6px;
    color: #63AA9C;
    font-size: 65px;
    font-weight: bold;
    position: absolute;
    right: 11px;
    text-decoration: none;
}

.big-wrapper {
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    width: 600px;
    height: 500px;
    background: #6e6b6a;
    display: none;
    overflow: hidden;
}

.big-img {
    width: 333px;
    height: 487px;
    -webkit-box-shadow: 3px 4px 9px 0 #221E1D inset;
    -moz-box-shadow: 3px 4px 9px 0 #221E1D inset;
    -ms-box-shadow: 3px 4px 9px 0 #221E1D inset;
    box-shadow:3px 4px 9px 0 #221E1D inset;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    position: absolute;
    top: 10px;
    left: -333px;
}

.big-img img {
    width: 321px;
    height: 473px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -236.5px 0 0 -160.5px;
}

.fechar {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 4px;
    background: #63aa9c;
    color: #6e6b6a;
    font-size: 18px;
    text-decoration: none;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 8px;
   ...

JavaScript

$('.thumb').hover(function() {
                $(this).find('.mask').stop(true,true).fadeIn(500);
        }, function() {
                $('.mask').stop(true,true).fadeOut(250);
        });

        $('.mask a').click(function(e) {
            e.preventDefault();
            var $thumb = $(this).closest('.thumb');
            $thumb.addClass('proximo');
            $('.proximo').next('.big-wrapper').addClass('ativo');
            $thumb.fadeOut(1000, function() {
                $('.ativo').fadeIn(1000, function() {
                    $('.ativo .big-img').animate({ "left" : "10px" },1000);
                });        
            });
        });
        
        $('.fechar').click(function(e) {
            e.preventDefault();
            var $thumb = $(this).closest('.thumb');
            $('.big-img').animate({"left" : "-333px" },1000, function() {
                $('.ativo').fadeOut(1000).removeClass('ativo');
                $thumb.delay(1000).removeClass('proximo').fadeIn(1000);
                $('.mask').css({"display" : "none"});
            });
        });