기본 9각형 그리드 이미지 정렬 효과입니다. 마우스를 이미지 위로 가져가면 반투명 마스크 효과가 이미지 상단에서 아래로 미끄러집니다.
일부 텍스트 소개가 동시에 나타납니다
사용방법:
1. 웹 페이지에 헤드의 CSS 스타일을 도입하세요
2. 웹페이지 본문 끝에 코드 부분을 복사하세요
(js와 이미지는 절대 경로를 사용하므로 수정은 권장하지 않습니다)
$(함수(){
$('.sgw_img dt').hover(function(){
$(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},함수(){
$(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);
},함수(){
$(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})
위 내용은 이 글에 공유된 내용입니다. 모두 마음에 드셨으면 좋겠습니다.