CSS realizes the mask effect when the mouse moves to the image

1. Put the mask layer HTML code and the picture in a div

I put it in .img_div.

<div class="img_div">
    <img src="./images/paella-dish.jpg">
 
        <a href="#">
            <div class="mask">
               <h3>A Picture of food</h3>
                </div>
        </a>
</div>

2. Add styles to images and mask layers

Image: relative

Mask layer: absolute

Make the two styles overlap.

When the mouse is not on the image, the mask layer does not display .mask { opacity: 0; } .

.img_div {
    margin: 20px 400px 0 400px;
    position: relative;
    width: 531px;
    height: 354px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 531px;
    height: 354px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
}
.mask h3 {
    text-align: center;
}

3. Use hover

Change the transparency to make the mask layer show through.

.img_div a:hover .mask {
    opacity: 1;           
}

Effect picture:

Summarize

The above is the CSS that I introduced to you to realize the mask layer effect when the mouse moves to the image. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!