Home  >  Article  >  Web Front-end  >  Use jQuery to implement image masking, semi-transparent falling occlusion_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:08:551252browse

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn