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/