JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<div class="colorbox hidden" >
    <div class="colorbox_top_border"></div>
    <div class="colorbox_bottom_border"></div>
    <div class="colorbox_content">
    </div>
</div>
<p class="opener">Открыть</p>
<p class="closer">Закрыть</p>
<img src="http://cougardesign.ru/images/clients/2.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/3.jpg" class="lister" alt="" />

CSS

.colorbox {
    width:100%;    
    height:400px;
    background: url(http://cougardesign.ru/templates/cougarnest/images/colorbar.png);
    position:relative;
    top:20px;
    margin-bottom:20px;
}
.colorbox_content {
    margin:20px;
}
.colorbox_top_border {
    position:absolute;
    top:0px;
    width:100%;
    height:7px;
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #e5e5e5 1%, #f7faff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5e5e5), color-stop(100%,#f7faff));
    background: -webkit-linear-gradient(top, #e5e5e5 1%,#f7faff 100%);
    background: -o-linear-gradient(top, #e5e5e5 1%,#f7faff 100%);
    background: -ms-linear-gradient(top, #e5e5e5 1%,#f7faff 100%);
    background: linear-gradient(to bottom, #e5e5e5 1%,#f7faff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f7faff',GradientType=0 );
    border-bottom:1px solid gray;
    -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 5px 5px rgba(50, 50, 50, 0.5);
}
.colorbox_bottom_border {
    position:absolute;
    bottom:0px;
    width:100%;
    height:7px;
    background: #f7faff;
    background: -moz-linear-gradient(top, #f7faff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7faff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #f7faff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #f7faff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #f7faff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #f7faff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7faff', endColorstr='#e5e5e5',GradientType=0 );
    border-top:1px solid gray;
    -webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px -5px 5px rgba(50, 50, 50, 0.5);
 ...

JavaScript

$(document).ready(function() {
});
$('.opener').click(function() {
        $('.colorbox').show('blind');
});
$('.closer').click(function() {
        $('.colorbox').hide('blind');
});
$('.lister').click(function() {
    var img_path = $(this).attr('src');
    img_path = img_path.replace(".jpg","_full.jpg");
        $.ajax({  
                url: img_path,  
                cache: false,  
                success: function(html){  
                    $(".colorbox_content").html('<img src="' + img_path + '" alt="Картинка" />');  
                }
            });
});