How to overlap item in owl carousel on hover?

Question

I have this owl carousel

    $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
    })

body {
      background-color: teal;
    }

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

    .owl-carousel .item {
      height: 200px;
      transition: transform 0.5s;
      -ms-transform: scale(1); 
      -webkit-transform: scale(1);
      transform: scale(1);
      z-index: -1;
    }

    .owl-carousel .item:hover {
      transition: transform 0.5s;
      -ms-transform: scale(1.3);
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      z-index: 9999;
    }

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

    .owl-carousel h4:hover {
      background-color: red;
    }

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

    .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>
      </div>
      <div class="item">
        <div class="item-inner-wrapper">
          <h4>2</h4>
        </div>
      </div>
      <div class="item">
        <div class="item-inner-wrapper">
          <h4>3</h4>
        </div>
      </div>
      <div class="item">
        <div class="item-inner-wrapper">
          <h4>4</h4>
        </div>
      </div>
    </div>

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

And I want to make an animation on hover item, I did that animation, but the problem is that said animation needs to overlap the hovered item on top of all the rest of the carousel.

Currently the animation respects "the order" that exists in the carousel, that is, if we hover on the second item, it is shown below the third and above the first.

Ideally, the second item would be displayed on top of all the rest of the carousel

I tried with z-index but the problem persists.

How can I solve it? I need to overlap the hovered item

Answer 1

So, actually z-index was the property you need but in correct place. I only added these properties below and that is it.

.owl-item.active{z-index: 1;}

.owl-item.active:hover{z-index: 2;}

    $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 10,
      nav: true
    })

body {
      background-color: teal;
    }

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

    .owl-carousel .item {
      height: 200px;
      transition: transform 0.5s;
      -ms-transform: scale(1); 
      -webkit-transform: scale(1);
      transform: scale(1);
      z-index: -1;
    }

    .owl-carousel .item:hover {
      transition: transform 0.5s;
      -ms-transform: scale(1.3);
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      z-index: 9999;
    }

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

    .owl-carousel h4:hover {
      background-color: red;
    }

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

    .owl-carousel.owl-theme .owl-nav {
      margin-top: -90px;
    }
    .owl-item.active{
      z-index: 1;
    }

    .owl-item.active:hover{
        z-index: 2;
    }

<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>
      </div>
      <div class="item">
        <div class="item-inner-wrapper">
          <h4>2</h4>
        </div>
      </div>
      <div class="item">
        <div class="item-inner-wrapper">
          <h4>3</h4>
        </div>
      </div>
      <div class="item">
        <div class="item-inner-wrapper">
          <h4>4</h4>
        </div>
      </div>
    </div>

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