Use jQuery to implement translucent falling occlusion of image masks

Use jQuery to implement translucent falling occlusion of image masks

This article mainly introduces how to use jQuery to implement the semi-transparent falling occlusion of the Image Mask. The effect is very good and can be used directly when you are using the album.

 

By default, the video is arranged on a nine-square-lattice image. When you hover your mouse over the image, a translucent mask is displayed on the top of the image.

Some text descriptions

Usage:

1. Introduce the css style in the head to your webpage.
2. Copy the code part to the place before the end of your webpage body.
(Js and images use absolute paths, which are not recommended to be modified)

 

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 will like it.