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 r

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;
}