css mouse hover image mask effect implementation code

This article mainly shares with you the css mouse hover image mask effect implementation code, hoping to help everyone.

css

p>p{    background: rgba(255, 255, 255, 0);    transition: background 0.3s linear;}p:hover>p{    background: rgba(228, 228, 228, 0.29);}

html

<p style="width:200px;height:200px;position: absolute;">
    <img src="img/img.jpg" style="width: 100%;height: 100%;"/>
    <p style="position: absolute;width: 100%;height: 100%;top: 0;"></p></p>

Related recommendations:

javascript Mouseover image displays the original image and disappears after the mouse is moved out (Multiple pictures)_Image special effects

The above is the detailed content of css mouse hover image mask effect implementation code. For more information, please follow other related articles on the PHP Chinese website!