How to make a mask on an image on hover so that it covers only the image without margins?

Question

css

I have a list of pictures. It is necessary that when you hover over the image, it is covered with a translucent mask. I made the mask appear from below, but in addition to the picture, it closes the margins, which I don’t need in principle. How can this be corrected?

Code: https://codepen.io/pen/?template=jOmyRrE

Answer 1

.works__item {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 65px;
}

.work-img {
    width: 100%;
}