Color overlay over HTML img

Question

I'm stuck at styling HTML image (<img>). 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!

check out this jsFiddle https://jsfiddle.net/MoolsBytheway/s1t0tmev/ — moolsbytheway, Sep 02 '16 at 16:06

moolsbytheway · Accepted Answer · 2017-12-08T11:59:16.867

Try this jsFiddle

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

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

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

You need to set the images as a background image, then you can apply an overlay.

Answer here on how to apply the overlay to a bg image: Overlay a background-image with an rgba background-color

edited May 23 '17 at 11:53

Community

1
1

answered Sep 02 '16 at 15:41

TFFX

190
1
9

ksav · Answer 3 · 2016-09-07T12:37:20.583

If you can restructure your html, you should wrap your img in a div so you can use an :after psuedo element. Apply some background style to that and it should sit neatly on top of your image (and your image can be any size, and you don't have to specify the size in css anywhere.)

.default-user {
  display: inline-block;
  position: relative;
}
.default-user:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
}

<div class="default-user">
  <img src="https://placekitten.com/200/300">
</div>

score 1 · Answer 4 · answered Sep 02 '16 at 16:31

.default-user {
 height: 280px;
 width: 280px;
 overflow: hidden;
 position: absolute;
    background: linear-gradient(#000    0%, #fff 100%);
}

<div class="grad">
  <img class="default-user"                src="http://i1.wp.com/freepngimages.com/wp-content/uploads/2015/10/cobra-snake-transparent-image.png?resize=624%2C557"     width="300px" height="300px">
 </div>

I noticed that the gradient would not show on your image, because your image background is not transparent.

score 0 · Answer 5 · answered Sep 02 '16 at 16:29

Please Try this code.

<div class="image"></div>

.image {
width: 300px;
height: 200px;


background: 
 /* top, transparent red *
linear-gradient( 
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45),
),
/* bottom, image */ 
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

Color overlay over HTML img

5 Answers5