JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<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...

CSS

.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;
}