Overlay text from a variable at the bottom of every image

Question

I'm hoping to overlay text from a variable at the bottom of every image using jquery preferably, or javascript.

Here's the project I'm working on - http://codepen.io/chrismcintosh/pen/ejzut.

This is the first javascript I've ever produced so don't be too hard on me.

Can anyone point me in the right direction?

Answer 1

The question is a little light on the details but hopefully this helps. First, you need to add an element that will hold the data to your HTML. You can do this via JS instead of via HTML if you want, but here goes:

<img src="http://greatworkperks.com/sites/default/files/perks/RunorDye2.jpg" 
class="tile" id="Run Or Dye" data-toggle="modal" data-target="#myModal"
onclick="myFunction(this.id)">
<!-- Below is the new div -->
<div id="RunOrDye_Overlay" class="overlay">Run or Dye</div>

Next, add the corresponding CSS style. Here is one that might work:

DIV.overlay{
  position: relative;
  display: inline;
  top: 110px;
  left: -290px;
  background-color: #333333;
  color: white;
}

At this point your overlay exists. I'm not sure if you need your JS to actually do anything at this point -- you could set up your JS to toggle this div when the user hovers over the image or something like that.

Does this help?

Answer 2

Instead of hard-coding the overlays into your html, you can use jQuery's .wrap() function to wrap each tile, and then append a text element to each wrapper.

// wrap each tile in a span
$('.tile').wrap('<span class="tile-wrapper"></span>')

// append the text to each wrapper
$('.tile-wrapper').each(function(){
  var $this = $(this);
  $this.append('<div class="image-text">' + $this.find('img').attr('id') + '</div>');
});

If you make each wrapper element position: relative and each text overlay position: absolute the overlays will automatically be positioned in the middle of each tile. Then you can adjust the overlay's bottom property to put them at the bottom of the tile.

Here's the updated CodePen