How to make absolute positioned elements overlap their overflow hidden parent .swiper-container?

Question

I have problem with SwiperJS. How to make absolute positioned elements overlap their overflow:hidden parent .swiper-container?

My example at https://codepen.io/webspilka/pen/XWNLOjj

.swiper-container {
  // overflow: visible; - works, but I get horizontal scroll
  // overflow: visible;
  background: #004156;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  width: 340px;
  border: 1px solid #ffcc00;
  height: 300px;
  // background: rgba(#ffcc00, 0.2);
  background: #fffcbb;
  &::after {
    display: block;
    content: "overflow:hidden problem !!!";
    position: absolute;
    z-index: 100;
    width: 100%;
    top: 285px;
    height: 300px;
    background: #ff9ca1;
    color: #b40a1b;
    // transform: translate(75%, -75%);
  }
}

Radicel

Answer 1

You need to overwrite

.swiper-backface-hidden .swiper-slide {
  translateZ(0);
}

with

.swiper-backface-hidden .swiper-slide {
  transform: initial !important; /* Important is optional, as long as this snippet is after the original */
}

and also change z-index: 100 to a negative integer in .swiper-slide::after

Here's a working solution on codepen

Finer