scale（）CSS3屬性移動其他元素懸停

Question

我試圖做一個畫廊，但是，我遇到了縮放屬性的問題。 看來，如果我快速懸停在幾個元素上，由於scale（），它們開始左右移動大約1px。

HTML：

<section id="first"> 
         <section> 
          <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /> 
          <a href="#"> 
           <div class="shade"> 

       <h5>Cappuccino</h5> 
           <p> 
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. 
           </p> 
          </div> 
          </a> 
         </section> 
         <section> 
          <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /> 
          <a href="#"> 
           <div class="shade"> 
           <h5>Cappuccino</h5> 
           <p> 
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. 
           </p> 
          </div> 
          </a> 
         </section> 
         <section> 
          <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /> 
          <a href="#"> 
           <div class="shade"> 
           <h5>Cappuccino</h5> 
           <p> 
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. 
           </p> 
          </div> 
          </a> 
         </section> 
         <section> 
          <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /> 
          <a href="#"> 
           <div class="shade"> 
           <h5>Cappuccino</h5> 
           <p> 
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. 
           </p> 
          </div> 
          </a> 
         </section> 
         <section> 
          <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /> 
          <a href="#"> 
           <div class="shade"> 
           <h5>Cappuccino</h5> 
           <p> 
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. 
           </p> 
          </div> 
          </a> 
         </section> 
         <section> 
          <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /> 
          <a href="#"> 
           <div class="shade"> 
           <h5>Cappuccino</h5> 
           <p> 
            This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. 
           </p> 
          </div> 
          </a> 
         </section> 

CSS：

#first img, .shade{ 
    margin-left:0.5%; 
    margin-bottom:0.5%; 
} 
#first>section{ 
    position:relative; 
    float:left; 
    margin: 0.7% 0.7% 0 0; 
    overflow:hidden; 
    width:273px; 
    height:182px; 
} 
#first>section img{ 
    position:relative; 
    -webkit-transition: all 0.2s linear; 
} 
#first>section>img:hover{ 
    -webkit-transition: all 0.2s linear; 
} 
.shade:hover{ 
    opacity:1; 
} 
.shade{ 
    width: 253px; 
    height: 162px; 
    background:rgba(255, 144, 0, 0.65); 
    position:absolute;/* needed*/ 
    top:0;/* needed*/ 
    left:0;/* needed*/ 
    opacity:0; 
    color:#fff; 
    padding:10px; 
    -webkit-transition: all 0.2s ease-in-out; 
} 
.shade p{ 
    margin-top:60px; 
    width: 255px; 
} 
.shade h5{ 
    text-decoration:underline; 
    font-size:110%; 

的jQuery：

$(window).load(function(){ 


picLink=$("#first a"); 
picLink.mouseover(function(){ 
$(this).prev().css("-webkit-transform","scale(1.3)"); 
}); 
picLink.mouseout(function(){ 
$(this).prev().css("-webkit-transform","scale(1.0)"); 
}); 

}); 

這裏是一個活生生的例子： http://jsfiddle.net/VJWg6/1/

Answer 1

我假設通過「來回走動」，你的意思是這種稍微令人不安的影響覆蓋了左側1px寬的小空間。

發生這種情況是因爲您有一個margin-left屬性（#first img）。此邊距保留overflow:hidden容器內的空間（section），因此當調整圖像大小時，只需覆蓋此空間。

作爲一種解決方案，您可以刪除圖像上的margin-left並將其移至section（當然，因爲上下文發生變化，您需要調整百分比）。

這個小補丁：http://jsfiddle.net/VJWg6/23/