title: scale() CSS3 property moves other elements on hover
body: <p>I'm trying to make a gallery, however, I'm having a problem with scale property.
  It appears that if I hover quickly over several elements they start to move about 1px back and forth due to scale().</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;section id="first"&gt;
                          &lt;section&gt;
                               &lt;img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /&gt;  
                              &lt;a href="#"&gt;
                                  &lt;div class="shade"&gt;
  
                  &lt;h5&gt;Cappuccino&lt;/h5&gt;
                                  &lt;p&gt;
                                      This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/section&gt;
                          &lt;section&gt;
                               &lt;img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /&gt;  
                              &lt;a href="#"&gt;
                                  &lt;div class="shade"&gt;
                                  &lt;h5&gt;Cappuccino&lt;/h5&gt;
                                  &lt;p&gt;
                                      This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/section&gt;
                          &lt;section&gt;
                               &lt;img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /&gt;  
                              &lt;a href="#"&gt;
                                  &lt;div class="shade"&gt;
                                  &lt;h5&gt;Cappuccino&lt;/h5&gt;
                                  &lt;p&gt;
                                      This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/section&gt;
                          &lt;section&gt;
                               &lt;img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /&gt;  
                              &lt;a href="#"&gt;
                                  &lt;div class="shade"&gt;
                                  &lt;h5&gt;Cappuccino&lt;/h5&gt;
                                  &lt;p&gt;
                                      This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/section&gt;
                          &lt;section&gt;
                               &lt;img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /&gt;  
                              &lt;a href="#"&gt;
                                  &lt;div class="shade"&gt;
                                  &lt;h5&gt;Cappuccino&lt;/h5&gt;
                                  &lt;p&gt;
                                      This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/section&gt;
                          &lt;section&gt;
                               &lt;img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" /&gt;  
                              &lt;a href="#"&gt;
                                  &lt;div class="shade"&gt;
                                  &lt;h5&gt;Cappuccino&lt;/h5&gt;
                                  &lt;p&gt;
                                      This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#first img, .shade{
      margin-left:0.5%;
      margin-bottom:0.5%;
  }
  #first&gt;section{
      position:relative;
      float:left;
      margin: 0.7% 0.7% 0 0;
      overflow:hidden;
      width:273px;
      height:182px;
  }
  #first&gt;section img{
      position:relative;
      -webkit-transition: all 0.2s linear;
  }
  #first&gt;section&gt;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%;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(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)");
  });
  
  });
  </code></pre>
  
  <p>Here's a live example:
  <a href="http://jsfiddle.net/VJWg6/1/" rel="nofollow">http://jsfiddle.net/VJWg6/1/</a></p>