전체 구조를 조정하지 않고 상자의 벽돌 열을 조정하는 방법

Question

jquery 벽돌을 사용하는 Wordpress 루프로 만든 상자 벽이 있습니다. 각 상자에는 엄지 손가락이 들어 있으며 각 이미지에 대한 정보를 숨기고 jquery on hover를 사용하여 각 상자를 세로로 확장하려고합니다. 내 문제는 다른 상자에 내용을 오버레이하고 싶지 않고 벽돌을 다시로드하면 마우스가 놓인 상자가 다른 지점에있을 때 문제를 일으키는 호버에 전체 벽돌을 조정하는 방법 만 파악할 수 있습니다. 그래서 그 상자의 나머지 부분의 형식을 바꾸지 않고 상자의 아래쪽에있는 박스를 그 칸에 놓아 두는 것이 좋습니다. 지금까지 가지고있는 것의 예를이 jsfiddle에서 볼 수 있습니다.

또한 hovered 상자에 jquery를 "fixed"위치로 지정하려고 시도했지만 장소를 잠그려고 시도했지만 벽돌을 다시로드하면 "absolute"로 바뀌지 만 무언가를 처리하고 있다고 생각합니다.

Answer 1

실제로 CSS3을 사용합니다.

.box{ 
transition: all 300 ease; 
-moz-transition: all 300 ease; /* Firefox 4 */ 
-webkit-transition: all 300 ease; /* Safari and Chrome */ 
-o-transition: all 300 ease ; /* Opera */ 
} 
.box:hover{ 
transform: scale(1.2,1.2); 
-moz-transform: scale(1.2,1.2); /* Firefox 4 */ 
-webkit-transform: scale(1.2,1.2); /* Safari and Chrome */ 
-o-transform: scale(1.2,1.2); /* Opera */ 
} 

. 이것은 효과가있다. 나는 당신이 z-index를 설정하여 호버에있는 다른 상자 위에 있도록해야한다고 생각합니다.

상자 크기가 같지 않으면 Jquery .height()를 사용하여 높이를 반환 할 수 있습니다. 그런 다음 이것을 사용하여 20 %의 상대적 증가에 대해 높이 * 1.2라고 말한 호버의 CSS를 설정할 수 있습니다.

는 그런 다음 아래로 다른 상자를 이동 증가

heightMoved = height * 0.2; 

의 가치를 얻을.

boxesBelowTopPosition = $(".box").css("top") 
movDown = boxesBelowTopPosition + heightMoved; 

그런 다음 Jquery hover 이벤트에서 .css ("top", moveDown)를 해당 colomun의 상자에 추가하십시오. 거친 아이디어