Как сделать выплывающий div, накладывающийся поверх другого?

Здравствуйте.
Имеется блок div, состоящий из нескольких других. При наведении на него, должен появляться эффект, как на этом сайте: https://illan-gifts.ru/catalog/futbolky/. И чёт у меня не получает. пытался через position: absolute. Но в итоге сам блок тогда получается уже как-бы не внутри и тогда с бордером проблемы начинаются.
(swip-my-info-no-hidden появляется и удаляется в js при наведении + использую bootstrap4)

код проги:

<div class="col-4">
			
	<div class="swip-my">
  <div class="swiper-container gallery-top" id="top">
    <div class="swiper-wrapper">
      <div class="swiper-slide" ><img src="img/product/1.jpg" alt=""></div>
      <div class="swiper-slide" ><img src="img/product/2.jpg" alt=""></div>
      <div class="swiper-slide" ><img src="img/product/3.jpg" 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="img/product/1.jpg" alt=""></div>
      <div class="swiper-slide" ><img src="img/product/2.jpg" alt=""></div>
      <div class="swiper-slide" ><img src="img/product/3.jpg" alt=""></div>
    </div>
  </div>

  </div>

</div>

		</div>

стили (sass):

.swip-my-info-hidden
	overflow: hidden
	height: 0

.swip-my-info-no-hidden
	overflow: visible
	position: absolute
	height: auto
	transform: rotateX(0deg)
	z-index: 9999
	background-color: #fff
	border-bottom: 1px solid #e1dfd7