JSFiddle - React, Tailwind, and code Playground

by Velimir Topolovacki

HTML

<div>absolute horizontal centered bottom positioning of image and text.</div>

<div>pure css3, js/jquery just for switching images and texts.</div>

<img id="the-image" src="">

<div id="the-text"></div>

CSS

#the-image,
#the-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* transform: translateX(-50%); */
  cursor: pointer;
}

#the-text {
  font-size: 24pt;
  bottom: 3rem;
  color: white;
  font-weight: 700;
  text-align: center;
}

JavaScript

var images = [
    "https://upload.wikimedia.org/wikipedia/commons/6/62/Bundesarchiv_Bild_102-00487A%2C_Albert_Einstein.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/d/d0/Jiddu_Krishnamurti_01.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/4/4e/Bananen_Frucht.jpg"
  ],
  heights = [
  	"25rem",
    "20rem",
    "30rem"
  ],
  texts = [
    "Hello,<br/>I'm Albert",
    "Hello,<br/>I'm Jiddu",
    "Hello,<br/>I'm a banana"
  ],
  idx = 0;

$("#the-image").attr("src", images[0]).css("height", heights[0]);
$("#the-text").html(texts[0]);

$("#the-image").bind("click", function() {
  if (idx === 2) {
    idx = 0;
  } else {
    idx++;
  }
  $("#the-image").attr("src", images[idx]).css("height", heights[idx]);
  $("#the-text").html(texts[idx]);
});