CODEWITHSUNDEEP
htmlcss
jsg
jsg

Reputation: 1264

White overlay over an image

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
}

Upvotes: 2

Views: 22710

Answers (1)

BenM
BenM

Reputation: 53208

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

Upvotes: 7

Related Questions