title: Grid Layout: create CSS so Elements keep position when adjacent element gets resized
body: <p>I want to build a simple image gallery in grid layout, and I'm using something like this
  <a href="http://www.javascript-fx.com/navigation/imagezoom/general_help/help.html" rel="nofollow noreferrer">Zoom on hover</a> to zoom hovered images.
  But instead the table-style from the link, I'd rather use an UL (unsorted list). Well maybe table is also ok, you tell me :)</p>
  
  <pre><code>&lt;ul id="grid"&gt;
      &lt;li class="thumb"&gt;&lt;a href="images/001.jpg" style="position:relative; left:2px; top:1px"&gt;
          &lt;img class="" src="images/001thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"&gt;
      &lt;/a&gt;&lt;/li&gt;
      &lt;li class="thumb"&gt;&lt;a href="images/002.jpg" style="position:relative; left:3px; top:0px"&gt;
          &lt;img class="" src="images/002thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"&gt; 
      &lt;/a&gt;&lt;/li&gt;
      &lt;li class="thumb"&gt;&lt;a href="images/003.jpg" style="position:relative; left:1px; top:1px"&gt;
          &lt;img class="" src="images/003thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"&gt; 
      &lt;/a&gt;&lt;/li&gt;
      &lt;li class="thumb"&gt;&lt;a href="images/004.jpg" style="position:relative; left:0px; top:0px"&gt;
          &lt;img class="" src="images/004thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"&gt; 
      &lt;/a&gt;&lt;/li&gt;
      &lt;li class="thumb"&gt;&lt;a href="images/005.jpg" style="position:relative; left:2px; top:3px"&gt;
          &lt;img class="" src="images/005thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"&gt; 
      &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My problem is - as I'm not very good in this - I don't know how to adjust the CSS so that the elements around the hovered image won't get shifted..
  I tried some things like display:block, but I guess I just don't know how would be an easy way to build this at all.. I don't need to show you my current ccs, as it's just a mixed up bunch of sh* o.O</p>
  
  <p>I tried layouts like in the following examples, and the one did the shifting of beneath elements, the other did not "hover-zoom", as all elements were fixed in size:</p>
  
  <p><a href="http://alijafarian.com/responsive-image-grids-using-css/" rel="nofollow noreferrer">responsive-image-grids</a></p>
  
  <p><a href="http://www.cssbakery.com/2010/07/image-grid-using-css-floats_6950.html" rel="nofollow noreferrer">image-grid-using-css-floats</a></p>
  
  <p>btw: in the anchor-tag, I'm using the style="..." (is inline-style html5-conform btw?) to individually shift the tiles, to create a bit of a random effect, but also not sure if I would put it there, in the li-tag, or img tag. I just don't wanna put it in the css for each image.
  Finally it all should look like this:
  <img src="https://i.stack.imgur.com/zvor2.png" alt="enter image description here"></p>
  
  <p>Do you have some hints, or a helping hand for a very neat and easy css? I don't need nothing fancy, I will crop all my thumbnails by hand (well by photo-editor not scissors), and if it would be too complicated, I would also make the whole grid a fixed size, w/o resizing option. But preferable it should scale or rearrange on windowresize.</p>