Berisko Berisko - 3 months ago 23
CSS Question

Color overlay over HTML img

I'm stuck at styling HTML image (). I can't find a way to add a white overlay over image.
I have been trying this - CSS background image on top of <img> (Doesn't work).

HTML

<img class="default-user" src="https://minotar.net/helm/Steve/16.png">


CSS

.default-user {
position: absolute;
outline: #e8e8e8 solid 1px;
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}


Is there any way to add overlay? Thank you for your help!

Answer

Try this jsFiddle

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 */
  }