JSFiddle - React, Tailwind, and code Playground

by Mools Bytheway

HTML

<div class=container>
<div id=overlay>Overlay text</div>
<img class="default-user" src="https://minotar.net/helm/Steve/16.png">
</div>

CSS

.default-user {
    position: absolute;
    outline: #e8e8e8 solid 1px;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
    width:150px;height:150px;
}
#overlay {
  padding:10px;
  position:absolute;
  background-color:white;
  opacity:0.5;    /* -> transparency 50% */
  height:130px;   /* -> image_height - padding */
  width:130px;    /* -> image_width - padding */
  z-index:1;      /* -> put overlay over image */
  }