White overlay over an image

Question

Hi i am aware that you can add a greyscale filter on an image, but would it be possible for a white overlay using the filter setting. I have to do it through css without the need for another div, to be absolute positioned over the image, with a white background and opacity setting changed. Just a simple image within a a tag:

<a href="#">
     <img src="http://placehold.it/300x200" />
</a>

css is basic

a img{
     display:block;
     max-width:100%;
     height:auto
}

can you show us your code? one way is you can use `pseudo` element of the parent and set it `absolute` with `100%` `width` and `height` — Vitorino fernandes, Aug 19 '15 at 09:16

score 7 · Accepted Answer · answered Aug 19 '15 at 09:25

Solution 1:

You may use the :after psuedo-element. For example, add a class of white-out to your <a> element, and then use the following CSS:

a.white-out {
    position: relative;
    display: inline-block;
}
    a.white-out:after {
        position: absolute;
        content: '';
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,.5);
    }

jsFiddle Demo

Solution 2:

Alternatively, you can try setting a white background on your <a> element, and reducing the opacity of the <img /> inside. For example:

a.white-out {
    display: inline-block;
    background: #fff;
}
    a.white-out img {
        opacity: 0.2;
    }

jsFiddle Demo

White overlay over an image

1 Answers1

Solution 1:

Solution 2:

Linked