Amazon Product overlay on Image

This places an overlay with text on top of an image like Amazon products are seen on affiliate websites

by MercenaryCarter

HTML

<div class="overlay_background">
  <a href="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/page-7#post-44003">
    <img src="https://i.imgur.com/K0LMo3Z.gif">
    <span class="overlay_text">View At BuSo</span>
  </a>
</div>

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