如何在不調整整個結構的情況下調整框架上的砌體柱

Question

我有一個由使用jQuery砌體的wordpress循環創建的框的牆。每個盒子都包含一個拇指，我隱藏每個圖像的相關信息，並希望使用懸停時的jquery垂直擴展每個盒子。我的問題是我不想疊加在另一個盒子上的內容，我只能弄清楚如何調整懸停時的整個石工，這導致磚石的重新加載導致懸停的盒子位於不同的位置時出現問題。因此，我只需要將其「柱子」下面的盒子下方的盒子向下移動，而不會改變其他砌體結構的格式，如果這樣做有任何意義的話。你可以看到這個jsfiddle到目前爲止我的例子。

此外，我試圖給懸停框與jquery的一個「固定」的位置，試圖鎖定它的位置，但砌體重新加載將其改回「絕對」，但我認爲我在那裏的東西。

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 */ 
} 

如果您不希望比例尺在.box中設置新高度：懸停。這將工作。我想你可能需要設置一個z-index，以便它懸停在其他框上方。

如果你的盒子尺寸不一樣，你可以使用Jquery.height（）返回高度。然後你可以使用它來設置懸停的CSS來說高度* 1.2，相對增加20％。

然後得到增加

heightMoved = height * 0.2; 

的值。然後移動另一盒了。

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

然後在Jquery懸停事件上添加.css（「top」，moveDown）到該colomun中的框。粗糙的想法