Captions on an image with CSS

PHOTO EMBED

Tue Aug 16 2022 01:27:06 GMT+0000 (UTC)

Saved by @HiTsH987 #css

<!DOCTYPE html>
<html>
  <head>
    <style>
      .meme_container {
        position: relative;
      }
      .meme_container img {
        z-index: 1;
      }
      .meme_container .top_meme {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      .meme_container .bottom_meme {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
      }
    </style>
  </head>

  <body>
    <div class="meme_container">
      <img src="http://i.imgflip.com/1bij.jpg" />
      <p class="top_meme">This is a caption 1</p>
      <p class="bottom_meme">This is a caption 2</p>
    </div>
  </body>
</html>
content_copyCOPY