<div class="container"> <div class="row swip"> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="swip-my"> <div class="swiper-container gallery-top" id="top"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <div class="product-name"> <span>Кружка "Santos"</span> </div> <div class="product-price"> <span>135<span class="smal-price">.00</span></span><i class="fas fa-ruble-sign"></i> </div> <div class="swip-my-info-hidden"> <div class="product-info"> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> <span>АРТИКУЛ: 15604/24</span> </div> <div class="swiper-container gallery-thumbs" id="thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="https://illan-gifts.ru/api/files/a9b4aa87-323b-4125-a991-9c9ec433f2a8-futbolka-t-bolka-160-belaia.jpeg?width=260&height=160&keepAspect=true" alt=""> </div> </div> </div> </div> </div> </div> </div> </div>
.container { padding: 15px; } .swip .col-lg-4 { position: relative; box-shadow: 0px 0px 1px #ccc; z-index: 1; padding-top: 15px; padding-bottom: 15px; height: 230px; } .swip-my { margin: -15px; padding: 15px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0); position: relative; } .swip .col-lg-4 .swip-my-info-hidden { display: none; background-color: #fff; } .swip .col-lg-4:hover { z-index: 10; } .swip .col-lg-4:hover .swip-my { margin:-20px; padding: 20px; box-shadow: 0px 0px 1px #000; } .swip .col-lg-4:hover .swip-my-info-hidden { display: block; } .sswiper-slide img { margin-left: auto; margin-right: auto; display: block; max-width: 100%; } .gallery-thumbs img { max-width: 50px; }