Use jQuery to implement image masking, semi-transparent falling occlusion_jquery

The default nine-square grid image arrangement effect. When the mouse hovers over the image, a translucent mask effect will slide down from the top of the image

Some text introductions appear at the same time

How to use:

1. Introduce the css style in the head into your web page
2. Copy the code part to the end of the body of your webpage
(js and images use absolute paths and modifications are not recommended)

Copy code The code is as follows:

$(function(){
$('.sgw_img dt').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
            $(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);
})
$('.sgw_img dd').hover(function(){
           $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
            $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})

The above is all the content shared in this article, I hope you all like it.