축소판 호버 효과를 내 축소 이미지에 추가하는 방법

Question

현재 Wordpress를 사용하여 포트폴리오 사이트를 구축 중입니다. 마우스를 입력 할 때 트리거되는 호버 (hover) 효과를 만들어야합니다. 축소판이 천천히 확대되는 동안 특정 게시물에 대한 "프로젝트보기"라고 말하는 영구 링크가 포함 된 이미지 영역 위에 표시 할 상자를 얻으려고합니다. 현재 내 사이트는 반응 형이므로 고정식을 사용할 수 없습니다. 너비 또는 높이.

이

메신저를 목표로 무엇 :

임 거기에 기본적으로 이미지가 여기 http://blog.f-i.com/

을 놓을와 내가 http://jsfiddle.net/estx4/

에 내 현재의 마크 업을 게시 한 인터넷 무슨 일을 복제하려고

감사합니다.

Answer 1

h ere you go ... 이것은 순수한 CSS 기반입니다.

http://jsfiddle.net/2pBG6/

.loop-item { 
-webkit-transform:translate3d(0, 0, 0); 
-moz-transform:translate3d(0, 0, 0); 
-ms-transform:translate3d(0, 0, 0); 
-o-transform:translate3d(0, 0, 0); 
transform:translate3d(0, 0, 0); 
overflow:hidden; 
position:relative; 

}

Answer 2

확인이 fiddle.

jQuery를

$(function() { 
    $(this).find(".perma").hide(); //to hide the permalink on load 
    $(".post-wrap li").hover(function() { 
     $(this).find(".perma").fadeIn("slow"); //show link 
     $(this).find(".img").addClass("blur"); //make the image look out of focus 
    }, function() { 
     $(this).find(".perma").fadeOut("slow"); //hide link 
     $(this).find(".img").removeClass("blur"); //display image in normal state 
    }); 
});