Text over image in javascript and css

Question

I am trying to add text over a set of dynamic images that I have added with Javascript.

I have a loop in JavaScript that adds images that are located in an AWS by looping with an index i. I'd like to add the value of the index i in the bottom right side of each picture (hence, a dynamic tag based on the value of the index i).

I have this so far.

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 1; i < 40; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);

  allImages += '<img src= "https://s3.amazonaws.com/testimagesupload1120/' + i + '.jpg">';
}

$('#photos').append(allImages);

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

<section id="photos"></section>

Answer 1

To accomplish this, you will need to create a <div> to hold both the <img> and a <p> tag. Using your method, try something like:

allImages += '<div class="imgCard"><img src= "https://s3.amazonaws.com/testimagesupload1120/'+i+'.jpg"><p>' + i + '</p></div>';

Then, you can use css to position the text relatively and set the top/bottom and left/right properties.

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 1; i < 40; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);

  allImages += '<div class="myCard"><img src= "https://s3.amazonaws.com/testimagesupload1120/' + i + '.jpg"><p>' + i + '</p></div>';
}

$('#photos').append(allImages);

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

.myCard {
  position: relative;
}

.myCard p {
  color: white;
  font-weight: 900;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="photos"></section>

Answer 2

You can also use the css with lightest process pseudo-element counter:

#photos {
    counter-reset: img-counter;
}
#photos .myCard:after{
    content: counter(img-counter);
    counter-increment: img-counter;
    font-size: 26px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff;
  background:#000;
}

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 1; i < 40; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);

  allImages += '<div class="myCard"><img src= "https://s3.amazonaws.com/testimagesupload1120/' + i + '.jpg"></div>';
}

$('#photos').append(allImages);

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

.myCard {
  position: relative;
}

#photos {
  counter-reset: img-counter;
}

#photos .myCard:after {
  content: counter(img-counter);
  counter-increment: img-counter;
  font-size: 26px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="photos"></section>

Codepen Demo Link