How can I make this frame image for slideshow appear on top of slide images?

[ninabonina]

Hi! I am really unsure on how to make the text show and how to make the frame image appear on top of the slide images because right now I can see that the images are in front. I tried placing this bit (which is creating the frame), on container:before and after so I could change z-index but nothing happened and the text just won’t show, I wanted to place it below the frame.

    box-sizing: border-box;
  border: 5vw solid rgba(0, 0, 0, 0.5);
  border-image: url(https://i.imgur.com/cZ8ZLoM.png) 550 round;
  border-image-width: 1.5;
 z-index:50;

codepen

[anon55559730]

Hello,

I have not gone too far with editing the code, but these small changes helped. I turned the pictures into backgrounds of each slide with CSS, and put the <h1> tags inside their containers. So take a look:

<div class="container">
    
    <div class="post">
        <div class="img-one">
            <h1>title - 1</h1>
        </div>
    </div>

    <div class="post">
        <div class="img-two">
            <h1>title - 2</h1>
        </div>
    </div>

    <div class="post">
        <div class="img-three">
            <h1>title - 3</h1>
        </div>
    </div>

    <div class="post">
        <div class="img-four">
            <h1>title - 4</h1>
        </div>
    </div>

</div>

And the new classes I introduced:

.img-one {
  width: 100%;
  height: 500px;
  background-image: url(https://images.pexels.com/photos/4328962/pexels-photo-4328962.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: contain;
}

.img-two {
    width: 100%;
    height: 500px;
    background-image: url(https://images.pexels.com/photos/4354389/pexels-photo-4354389.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: contain;
  }

.img-three {
    width: 100%;
    height: 500px;
    background-image: url(https://images.pexels.com/photos/318391/pexels-photo-318391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: contain;
  }

.img-four {
    width: 100%;
    height: 500px;
    background-image: url(https://images.pexels.com/photos/2857580/pexels-photo-2857580.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    background-size: contain;
  }