JSFiddle - React, Tailwind, and code Playground

by PaulvdDool

HTML

<figure class="banner">
  <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png">
  <figcaption>
    <p>TEXT</p>
    <h3>TITLE</h3>
    <p>TEXT</p>
    <a href="">DETAIL</a>
  </figcaption>
</figure>

CSS

.banner {
  overflow: hidden; /* Prevent image from overflowing banner. */
  position: relative; /* Set to relative so absolute positioning of child elements is possible */
  
  /* In your original example, the image determined the height of the banner. In this example you have to set an height yourself, because it won't take the height */
  height: 600px;
  width: 350px;
}

.banner img {
  position: absolute; /* Position absolute so it won't push the figcaption outside the banner.*/
  z-index: 0; /* Place below figcaption */
  
  /* Positioning the image */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner figcaption {
  display: table; /* prevent figcaption filling full height of banner */
  width: 90%;
  z-index: 1; /* place on top of image */
  
  /* placing element at the center horizontally and vertically */
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.banner figcaption p, h3, a {
  background-color: red;
  line-height: 40px;
  margin: 0;
  text-align: center;
  width: 100%;
  display: block; /* so <a> element listens to width:100% */
}