Text Over Image In Javascript And Css

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 i

Solution 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 += '<divclass="imgCard"><imgsrc= "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.

functiongetRandomSize(min, max) {
  returnMath.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;
}

#photosimg {
  /* 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;
}

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

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

Solution 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;
}

functiongetRandomSize(min, max) {
  returnMath.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;
}

#photosimg {
  /* 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;
}

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

Codepen Demo Link