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)
$(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