CODEWITHSUNDEEP
htmlcss
Berisko
Berisko

Reputation: 643

Color overlay over HTML img

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!

Upvotes: 3

Views: 15634

Answers (5)

moolsbytheway
moolsbytheway

Reputation: 1291

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>

Upvotes: 4

ksav
ksav

Reputation: 20821

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>

Upvotes: 1

Ricky
Ricky

Reputation: 791

.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.

Upvotes: 1

Razia sultana
Razia sultana

Reputation: 2211

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);
}

Upvotes: 0

TFFX
TFFX

Reputation: 190

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

Upvotes: 1

Related Questions