Color Overlay Img

[justinede]

Hey Everyone!

Anyone know of a method, preferably css, that would allow me to color overlay an image?

Think of it as if you were in Photoshop and brought up the Blending Options panel and applied a Color Overlay.

Thanks!

[Sirlon]

Well, you can do somthing like:

.overlay-img { position:relative; display:inline-block;}

.overlay-img:before {

content: ' ';

display: block;

position:absolute;

width:100%;

height:100%;

background: rgba(240, 210, 0, 0.3); /* rgb Color with alpha, you can also give it a bg color and set opacity: down. */

pointer-events: none;

}

But i would recommend taking a look at & pixel manipulation. ;)

[soap]

If I had to achieve this effect, I’d first make a 1px x 1px 50% opacity (or whatever you want) colored png.

Then I’d do something like this:

div.holder {

position:relative

width:150px; height:150px;

}

img.overlayimg {

display:block;

position:relative;

z-index:100;

}

div.overlay_orange {

background:url(../images/overlay_orange.png) repeat;

position:absolute;

top:0; left:0;

width:100%; height:100%;

z-index:110;

}

[justinhimt]

Here is some CSS Overlay technique…CSS Color Overlay

[Author]

Posts