Grid Layout: create CSS so Elements keep position when adjacent element gets resized

Question

I want to build a simple image gallery in grid layout, and I'm using something like this Zoom on hover 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 :)

<ul id="grid">
    <li class="thumb"><a href="images/001.jpg" style="position:relative; left:2px; top:1px">
        <img class="" src="images/001thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)">
    </a></li>
    <li class="thumb"><a href="images/002.jpg" style="position:relative; left:3px; top:0px">
        <img class="" src="images/002thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li>
    <li class="thumb"><a href="images/003.jpg" style="position:relative; left:1px; top:1px">
        <img class="" src="images/003thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li>
    <li class="thumb"><a href="images/004.jpg" style="position:relative; left:0px; top:0px">
        <img class="" src="images/004thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li>
    <li class="thumb"><a href="images/005.jpg" style="position:relative; left:2px; top:3px">
        <img class="" src="images/005thumb.jpg" alt="" onMouseOver="JSFX.zoomIn(this)" onMouseOut="JSFX.zoomOut(this)"> 
    </a></li>
</ul>

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

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:

responsive-image-grids

image-grid-using-css-floats

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:

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.

Answer 1

Here is one solution that may work for you:

Demo Fiddle

It's just a matter of having a hover state where you can change the width+ height or you can use transform: scale();. I set the scaling elements to position: absolute just so you can make sure the z-index of the hovered element is always the highest.

HTML:

<div class="wrapper">
    <ul>
        // many <li> elements
    </ul>
</div>

CSS:

.wrapper {width: 300px;}

li {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: relative;
    padding: 3px;
}
a {
    display: block;
    height: 40px;
    width: 40px;
    background: lightblue;
    position: absolute;
    -webkit-transition: .3s;
    transition: .3s;
}
a:hover {
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
    z-index: 100;
    background: lightgreen;
}