Placing text over multiple images

Question

I am trying to to center text over multiple images using bootstrap and css. Most googling says i need to use position: absolute; However the most i am able to do is center the text in the middle of the screen but not over the image. I believe its something with bootstrap but i cannot find what is blocking it The goal is for the text to have animation over the image moving forward like fading in and such

I have already checked multiple post about this but they all seem to only work if its one image. Trying to do with with multiple images seems to require a different approach

EDIT: Since this got marked as a duplicate i would like to point out that the other post only show this working with ONE image. The other post do not work when it comes to multiple images

The portion of the code in question:

      
      .imgText {
        position: absolute;
        z-index: -1;
      }
      
      .imgList {
        z-index: -2;
      }

    <div class="row justify-content-center mt-3">
      <div class="ml-4 imgList">
        <img src="https://via.placeholder.com/200x200">
        <div class="imgText justify-content-center m-auto">
          test text
        </div>
      </div>
      <div class="ml-4 imgList">
        <img src="https://via.placeholder.com/200x200">
        <div class="imgText justify-content-center m-auto">
          test text
        </div>
      </div>
    </div>

You can see the live results here https://jsfiddle.net/nicholascox2/o29n78dL/61/

score 1 · Answer 1 · answered Jun 27 '19 at 05:47

1

try this

.imgText {
    position: absolute;
    transform:translate(-50%,-50%);
     top:50%;
    left:50%;
    z-index: 22;
  }

answered Jun 27 '19 at 05:47

Ravi Kadyan

323
1
9

That seems to have worked by allowing it to overlay on the image – nicholascox2 Jun 27 '19 at 05:49
however it doesn't center still https://jsfiddle.net/nicholascox2/o29n78dL/64/ – nicholascox2 Jun 27 '19 at 05:50

score 1 · Accepted Answer · answered Jun 27 '19 at 05:58

Here you go

JSFiddle

You need to set the parent element to be position: relative, so it's relative to the absolute positioned element, in this case the text.

This centers the element horizontally and vertically:

top: 50%; left: 50%; transform: translate(-50%, -50%)

Also you need to apply z-index in order for the text to appear above the image.

.ml-4 {
    position: relative;
}

.imgText.m-auto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

<!doctype html>

<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Nerd Arcadia</title>
  <meta name="description" content="">
  <meta name="author" content="">
  
  <style>
   /* The side navigation menu */
   .sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
   }

   /* The navigation menu links */
   .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
   }

   /* When you mouse over the navigation links, change their color */
   .sidenav a:hover {
    color: #f1f1f1;
   }

   /* Position and style the close button (top right corner) */
   .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
   }



   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
   @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
   }
      /* SPACING FOR PICTURES ON SMALLER SCREENS */
      @media screen and (max-width: 420px) {
        .imgList {margin-top: 25px;}
      }
      
      .imgText {
        position: absolute;
        z-index: -1;
      }
      
      .imgList {
        z-index: -2;
      }
      
  </style>
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
 </head>

 <body>
  
  <div id="mySidenav" class="sidenav">
   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Clients</a>
   <a href="#">Contact</a>
  </div>

  <div class="nav">
   <span id="navButton" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

            <img id="logo" class="justify-content-center m-auto" src="https://via.placeholder.com/200x100">
 
  </div>

    <div class="row justify-content-center mt-3">
      <div class="ml-4 imgList">
        <img src="https://via.placeholder.com/200x200">
        <div class="imgText justify-content-center m-auto">
          test text
        </div>
      </div>
      <div class="ml-4 imgList">
        <img src="https://via.placeholder.com/200x200">
        <div class="imgText justify-content-center m-auto">
          test text
        </div>
      </div>
    </div>


  <script>
   function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
   }

   function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
   }
  </script>


  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
 
 
 </body>
</html>

It's not that common I'd say - iif you're interested, you can read up on how it works [here](https://css-tricks.com/centering-percentage-widthheight-elements/) — Marc Hjorth, Jun 27 '19 at 06:08

Placing text over multiple images

2 Answers2