JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<section class="usl">
    <h2>Услуги</h2>
    
</section>
<section class="gal noslide">
    <h2>Галерея</h2>
    <div class="wr_gal">
        <div class="but_back"></div>
        <span>Выберите категорию</span>
        <div class="categ">
            <div class="bl_categ">
                <img alt="" src="http://91.215.77.198:8090/i/1.jpg" />
            </div>
            <div class="bl_categ f_cat_bl">
                <img alt="" src="http://91.215.77.198:8090/i/2.jpg" />
            </div>
            <div class="bl_categ">
                <img alt="" src="http://91.215.77.198:8090/i/3.jpg" />
            </div>
            <div class="bl_categ">
                <img alt="" src="http://91.215.77.198:8090/i/4.jpg" />
            </div>
            <div class="bl_categ f_cat_bl">
                <img alt="" src="http://91.215.77.198:8090/i/5.jpg" />
            </div>
            <div class="bl_categ">
                <img alt="" src="http://91.215.77.198:8090/i/6.jpg" />
            </div>
        </div>
    </div>
    <div class="cont_gal"></div>
</section>
<section class="vak">
    <h2>Вакансии</h2>
    
</section>

CSS

*{margin:0;padding:0;}
section{overflow:hidden;padding: 0 10%;position:relative;}
section h2{color:#fff;text-align:center;padding:20px 0;margin-bottom:10px;}
.usl{min-height:200px;background:#253342;}
.gal{background:#FFA91E;}
    .gal > div.wr_gal{width:100%;position;absolute;z-index:1;left:0;right:0;bottom:0;top:0;}
    .gal > div.wr_gal > span{padding:0;margin-bottom:10px;text-align:center;color:#fff;width:100%;display:block;}
    .gal > div.wr_gal .categ{padding:20px 5% 30px 5%;  display: inline-block;}
    .gal > div.wr_gal .categ .bl_categ{width:30%;float:left;margin-bottom:25px;overflow:hidden;cursor:pointer;}
    .gal > div.wr_gal .categ .bl_categ.f_cat_bl{margin:0 5%}
    .gal > div.wr_gal .categ .bl_categ img{border-radius:5px;width: 100%;}
.vak{min-height:200px;background:#1ba1e2;}


    .gal.slide{min-height:420px;}
        .gal.slide h2{display:none;}
        .gal.slide div.wr_gal{position:absolute;width:100px;top:0;left:0;bottom:0;}
            .gal.slide div.wr_gal span{display:none;}
            .gal.slide div.wr_gal .but_back{position:absolute}
            .gal.slide div.wr_gal .but_back{width:40px;height:40px;margin:30px;background:blue;}
            .gal.slide div.wr_gal .categ{padding:0;position:absolute;top:100px;left:0;}
            .gal.slide div.wr_gal .categ .bl_categ{width:60px;float:none;margin:0 20px 20px 20px;}
    section.noslide .cont_gal{display:none;}
    section.slide .cont_gal{position:absolute;left:100px;top:0;right:0;bottom:0;background:#444;z-index:2;box-shadow:-6px -3px 6px rgba(0,0,0,0.3), inset 1px 0 1px #333;opacity:.9;}

JavaScript

$(document).ready(function(){
    $('section.gal .bl_categ').on('click', function(){
        $(this).parents('section.gal').addClass('slide').removeClass('noslide');
    });
    $('section.gal .but_back').on('click', function(){
        $(this).parents('section.gal').removeClass('slide').addClass('noslide');
    });
});