How do I add a translucent purple colour over the image in my output?

Question

Please help me to insert a translucent purple colour over the image in my output.
Suggest the updated code
Thank You!
https://code.sololearn.com/WA20A11a1a11/?ref=app

Answer 1

Add the following css class to the image element:

.translucent {
-webkit-filter: opacity(30%);
filter: opacity(30%);
}

https://code.sololearn.com/WTuFtPEvKze3/?ref=app

Answer 2

You can achieve it by using two blocks inside container as layers.
First layer is img
Last layer in front is just div with as same as IMG sizes.

All you need is just:
#img{
z-index: 15;
display:block;
position: relative;
width:100%;
height:100%;
}

#layer{
z-index: 16;
display: block;
position: absolute;
width:100%;
height:100%;
}