<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <div class="case-study-gallery"> <div class="case-study study1"> <figure><p>АКСЕССУАРЫ</p></figure> <div class="case-study__overlay"> <h2 class="case-study__title">Аксессуары на приборы Aurora</h2> </div> </div> <div class="case-study study2"> <figure><p>ОДНОРЯДНЫЕ ПАНЕЛИ</p></figure> <div class="case-study__overlay"> <h2 class="case-study__title">Однорядные панели Aurora</h2> </div> </div> <div class="case-study study3"> <figure><p>ДВУХРЯДНЫЕ ПАНЕЛИ</p></figure> <div class="case-study__overlay"> <h2 class="case-study__title">Двухрядные панели Aurora</h2> </div> </div> <div class="case-study study4"> <figure><p>РАБОЧЕЕ ОСВЕЩЕНИЕ</p></figure> <div class="case-study__overlay"> <h2 class="case-study__title">Рабочее освещение</h2> </div> </div> <div class="case-study study5"> <figure><p>Круглые Фары</p></figure> <div class="case-study__overlay"> <h2 class="case-study__title">Круглые фары Aurora</h2> </div> </div> <div class="case-study study6"> <figure><p>ГОЛОВНОЙ СВЕТ</p></figure> <div class="case-study__overlay"> <h2 class="case-study__title">Фары головного света</h2> </div> <p style="vertical-align:bottom;margin-top:50%" >ГОЛОВНОЙ СВЕТ</p> </div> </div>

* { box-sizing: border-box; } P{text-align:center; font-weight:light; color:#9498a8;top:5%; font-family: 'Raleway', sans-serif; vertical-align:bottom;} .case-study-gallery { margin-top: 50px; width: 100%; margin: 50px auto; font-family: 'Raleway', sans-serif; } figure{ margin-top:50%; margin-top:80%; } .case-study { position: relative; display: block; width: 90%; min-height: 150px; margin: 0 auto 2rem; background-size: cover; border-radius: 3px; box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2); overflow: hidden; transition: all .4s ease; } @media screen and (min-width: 37.5em) { .case-study { height: auto; } } @media screen and (min-width: 45em) { .case-study { display: inline-block; width: 15%; height:150px; margin-left: 15px; } } .case-study__img { width: 100%; display: block; margin-top: 50%; transform: translateY(50%); margin: 0 auto; } .case-study__overlay { width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; } .case-study__overlay:after { content: ''; width: 100%; border-radius: 5px; height: 100%; background-color: #354388; opacity: 0; position: absolute; top: 0; z-index: -10; left: 0; transition: all .3s ease; } .case-study__title { position: relative; top: -100px; margin-bottom: 2rem; margin-top: 4rem; font-size: 2.0rem; font-family: 'Raleway', sans-serif; font-weight: 100; color: white; text-align: center; letter-spacing: 5px; transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3); } .case-study__link { position: relative; display: block; width: 60%; top: 200px; padding: 10px; margin: 0 auto; font-family: 'Raleway', sans-serif;; color: white; letter-spacing: 3px; text-decoration: none; text-align: center; border: 2px solid white; border-radius: 1px; font-size: 1.25em; transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3); } .case-study__link:hover { background-color: white; color: #202020; } .case-study:hover .case-study__title { top: 0; } .case-study:hover .case-study__link { top: 0; } .case-study:hover .case-study__overlay:after { opacity: .3; } .study1 { background-image: url("https://szaurora.kz/image/catalog/raznie.jpg"); } .study2 { background-image: url("https://szaurora.kz/image/catalog/alo-s1-20-p7e7j.jpg"); } .study3 { background-image: url("https://szaurora.kz/image/catalog/alo-10-p4e4d.jpg"); } .study4 { background-image: url("https://szaurora.kz/image/catalog/blizhnij2djujma.jpg"); } .study5 { background-image: url("https://szaurora.kz/image/catalog/alo-r-7-e7bh2.jpg"); } .study6 { background-image: url("https://szaurora.kz/image/catalog/alo-m-1b.jpg"); }