Text over image when container have white-space: nowrap;

Question

This is a scrollable div that contains some images. The container has white-space:nowrap CSS property. I am trying to add a text layer over each of the images (Just like bellow image), but I'm unable to do that.

I've tried position:absolute on text container to do that but it breaks scroll-x

So how can I do that? Thank you for coming to help me out.

.sbn::-webkit-scrollbar{width: 0;}
.sbn{overflow-x:scroll;white-space:nowrap;border-radius:5px;}
.sbn img{height:100px;width:100%;}

<div class="sbn">
<a><img src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"></a>
<a><img src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"></a>
<a><img src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"></a>
<a><img src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"></a>
<a><img src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"></a>
</div>

Answer 1

Write your text inside a tag

<style>
  .sbn::-webkit-scrollbar {
    width: 0;
  }
  .sbn {
    overflow-x: scroll;
    white-space: nowrap;
    width: auto;
    border-radius: 5px;
  }
  .sbn img {
    height: 100px;
    width: 100%;
  }

  .sbn a {
    display: inline-block;
    position: relative;
    width: 100vw;
  }

  .sbn a span {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    color: #fff;
    text-align: center;
  }
</style>

<div class="sbn">
  <a>
    <span>Test</span>
    <img
      src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"
  /></a>
  <a>
    <span>Test</span
    ><img
      src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"
  /></a>
  <a
    ><span>Test</span
    ><img
      src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"
    /><span>Test</span></a
  >
  <a
    ><span>Test</span
    ><img
      src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"
  /></a>
  <a
    ><span>Test</span
    ><img
      src="https://image.freepik.com/free-vector/speed-light-spotlights-digital-background_23-2148821702.jpg"
  /></a>
</div>