Data overlay ontop of image

This places the image inside an overlay and links to an image.

by MercenaryCarter

HTML

<img src="https://i.imgur.com/OkJRQ6M.gif" class="at-amazon" data-amazon-link="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/page-7#post-44006" data-amazon-text="Ryuzaki Is Wrong">

CSS

.overlay_background {
  position: relative;
  z-index: 1;
  background-color: #ebebeb;
  padding: 4px 4px 2px 4px;
  display: inline-block;
}

.overlay_background img {
  margin: 4px; /* for light-gray background */
}

.overlay_text {
   position: absolute;
   bottom: 11px;
   right: 8px;
   padding: 6px 20px;
   color: #ffffff;
   display: inline;
   background-color: #666666;
   background-color: rgba(102, 102, 102, 0.9);
   z-index: 2;
}

JavaScript

jQuery(document).ready(function(){

  jQuery('.at-amazon').each(function(i, obj) {

    let the_image_url = $(this).attr("src");
    let the_amazon_url = $(this).attr("data-amazon-link");
    let the_amazon_text = $(this).attr("data-amazon-text");

      //Do nothing if fields are blank
      if ((the_image_url === undefined) || (the_image_url === null)) { return; }
      if ((the_amazon_url === undefined) || (the_amazon_url === null)) { return; }
      if ((the_amazon_text === undefined) || (the_amazon_text === null)) { return; }

		//All good to go then
    jQuery(this).replaceWith('<div class="overlay_background"><a href="' + the_amazon_url + '"><img src="' + the_image_url + '"><span class="overlay_text">"' + the_amazon_text + '"</span></a></div>');

  });

});