JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h2>Overlay</h2>
  <figure>
    <a href="http://#" target="_self"><img src="http://www.dominiopublico.gov.br/download/imagem/go000008.jpg"></a>
  </figure>
</div>

CSS

div {
    max-width: 200px;
    max-height: 200px;
    text-align: center;
    background: black;
	border-radius:7px;
}

h2 {
    color: white;
    font-weight: bold;
    font-family: Arial;
    text-transform: uppercase;
    height: 200px;
    margin-bottom: -270px;
    padding-top: 35%;
}

figure {
    margin: 0;
    opacity: .8;
}

a {
    text-decoration: none;
}

img {
	max-width:200px;
	max-height:200px;
    border-radius:7px;
}