Make elements show above carousel

Question

I have a carousel, using owlCarousel, and I'm trying to make the elements in the carousel to expand on hover. The way it's implemented, is it's simply displayed: none by default, then on hover, it's displayed to block. Nothing fancy.

It's taken out of the flow by an absolute positioning, this way the carousel will not expand on element hover.

The problem is, when the element get's hovered, the details, expanded element doesn't show. I tried giving it a high z-index, but it doesn't seem to fix the problem. Here's the code:

CodePen FIle

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 300px;
  position: absolute;
  top: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  z-index: 20;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Answer 1

See if this will work for you:

1. Set .owl-carousel .item to your content height + detail height (I used 200px)

2. Set margin-top of .owl-carousel.owl-theme .owl-nav to -(detail height) + 10px (it was originally 10px)

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item {
  height: 200px;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 100px;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
}

.owl-carousel.owl-theme .owl-nav {
  margin-top: -90px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>1</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>