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="" />
</a>
css is basic
a img{
display:block;
max-width:100%;
height:auto
}
1 Answer
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);
}
