Geek Answers Handbook

Grid Layout: Create CSS to keep elements in position when an adjacent element is offset

I want to create a simple gallery of images in a grid layout, and I'm using something like this Zoom in hover to enlarge the image. But instead of this table style from the link, I would prefer to use UL (unsorted list). Well maybe the table is ok too, 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 that since I am not very good at this, I don’t know how to adjust the CSS so that the elements around the frozen image do not move. I tried some things like display: block, but I think I just don’t know how easy it would be to build it at all. I don't need to show you my current ccs, as this is just a sh * oO mess

, , , - "hover-zoom", :

responsive-image-grids

image-grid-using-css-floats

btw: anchor style = "..." ( html5- btw?) , , , , li-tag img. CSS . , : enter image description here

- css? , (, , , ), , , , windowresize.

+1
1

, :

-

, width + height, transform: scale();. position: absolute, , z-index .

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

More articles:


All Articles