<figure class="t2h-figure">
  <img src="https://images.unsplash.com/photo-1521014186850-f8104766c605?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=900&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ&s=6cf7c906f1b0f3c993aa9889508b6c86" />
  <figcaption>
    Budapest
  </figcaption>
</figure>

<figure class="t2h-figure">
  <img src="https://images.unsplash.com/photo-1514553808637-6cda003eb4ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=900&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ&s=6cf7c906f1b0f3c993aa9889508b6c86" />
  <figcaption>
    Copenhagen
  </figcaption>
</figure>
@use postcss-cssnext;

:root {
  --text-color: #fff;
  --max-width-figure: 700px;
}

.t2h-figure {
  margin: 1em;
  position: relative;
  display: inline-block;
  max-width: var(--max-width-figure);
  color: var(--text-color);
  text-align: center;
  
  &:after {
    content: '';
    clear: both;
  }
  & img {
    width: 100%;
    display: block;
  }
  & figcaption {
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 1em;
    font-size: 2.5em;
    font-weight: 800;
    letter-spacing: 0.2em;
    font-family: arial;
    text-transform: uppercase;
    border: 4px solid var(--text-color);
    transform: translateY(-50%) translateX(-50%);
  } 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.