title: expand an images padding over other elements using only CSS
body: <p>I have a gallery of images. When you hover over an image the padding expands and it gets a shadow effect.</p>
  
  <p>Is it possible to have the padding expand over the other images? So the change in the padding does not distort any other thing on the page?</p>
  
  <p>Here is the code I have -- <a href="http://jsfiddle.net/U6VNx/" rel="nofollow">http://jsfiddle.net/U6VNx/</a> --</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.gallery {margin:0 auto; width:900px;}
  
  div.images {text-align:center; width:900px;}
  
  div.images a {width:259px; height:254px; }
  
  div.images a img {padding:5px; transition:padding .5s, box-shadow .5s;}
  
  div.images a img:hover {padding:20px; box-shadow:0 0 8px #000000; overflow:hidden;}
  </code></pre>
  
  <p>Thanks in advance.</p>