Create clip mask image src with using html/css - html

Question

I want to create image mask with using only html and css. Not using svg or background image.
The clip mask need to apply with <img src='">. I can't able to achieve this without background image.
.pic-mask {
position:relative;
}
.pic-mask:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(63, 72, 48, 0.8);
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
<div class="pic-mask">
<img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg" width="500">
</div>
My expected output like below image

Answer 1

You have to set the dynamic width and height of the image, try something like this:
Html:
<div class="image-container">
<div class="pic-mask">
<img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg">
</div>
</div>
CSS:
.image-container img {
width:100%;
height:100%;
}
.pic-mask {
position:relative;
}
.pic-mask:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(63, 72, 48, 0.8);
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
If you want to limit the width of the picture, you can do so on the image container by putting for example:
.image-container {
max-width:500px;
}
The reason for it is pic-mask is absolute to relative parent element and right:0 will put it at 0px from the right of it's relative parent but the picture itself is set to smaller width than the parent element.