How to add low-key (black, transparent overlay) effect to image using CSS?


this is the effect I want

I am trying to make an image looks like it is kind of transparent? I don't really know how to describe it but it is like you can write texts on it and the image is in the back.

is this doable with css or javascript or any other language?


Answers:


I think what you need is a css filter.

For the very latest browsers check out these examples which use:

img {
   -webkit-filter: brightness(20%);
    filter:brightness(20%);
}

For older browsers check out these examples which use:

img {
    opacity: 0.3;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}