Hi i'm trying to make a effect with a hover and z-index but one of my cards start to Flickering when I hover over it

my component: if i remove the first position-relative, the zoom of my hover looks too big dont looks like the size of position-ralative but the Flickering stop, and if i remove the second position-relative it keeps Flickering

<div className="card-component position-relative">
    <div 
      className={`card rounded-0 rounded-bottom border-top-0 border-gray border-lighten-2 
      position-relative p-3 bg-gray bg-lighten-4 cursor-pointer ${positionCollisionCard}`} 
      onMouseEnter={(event) => collisionCard(event)} 
      onMouseLeave={() => setPositionCollisionCard('')}>
      {children}
    </div>
  </div>

hover Effect:

i need to use position absolute because i need to pass over other components without push them, so is the reason why i don't use relative, z-index:99999 dont works

.card-component {
    &:hover{
      .card{
        position: absolute !important;
        top: 0;
        width: 130%;
        z-index: 99999;
        @include transition(all .2s ease-out);
      }
      .description-content {
        display: block !important;
        .description {
          height: 54px;
          max-height: 54px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .card {
    width: 100%;
    @include transition(0);
    &.hover-right {
      right: 0 !important;
    }
    &.hover-bottom {
      bottom: 0 !important;
    }
  }