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

Question

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?

Answer 1

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

Answer 2

You can add a mask over the image like the one below:

html:

<div>
<img scr="yourImage.jpg" alt="" />
<div class="mask"></div>
</div>

css:

.mask{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}