Question

我想在网格布局中构建一个简单的图库，我正在使用这样的东西 Zoom on hover缩放悬停的图片。但相反，链接中的表格式，我宁愿使用UL（未排序列表）。好吧也许桌也行，你告诉我:)。

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

我的问题是 - 因为我在这方面不是很好 - 我不知道如何调整CSS，以便悬停图像周围的元素不会被移位.. 我尝试了一些像display：block这样的东西，但我想我只是不知道如何构建这个简单的方法..我不需要向你展示我当前的ccs，因为它只是一堆混合sh * oO

我尝试了以下示例中的布局，并且其中一个做了下方元素的移位，另一个没有“悬停缩放”，因为所有元素都是固定大小的：

responsive-image-grids

image-grid-using-css-floats

btw：在anchor-tag中，我使用style =“...”（内联式html5 -contr btw？）来单独移动切片，以创建一些随机效果，但是也不确定我是否会把它放在li-tag或img标签中。我只是不想把它放在每个图像的CSS中。最后它应该看起来像这样： enter image description here

你是否有一些提示，或帮助一个非常简洁的css？我不需要任何花哨的东西，我会手工裁剪所有的缩略图（通过照片编辑器而不是剪刀），如果它太复杂，我也会使整个网格固定大小，没有调整大小选项。但最好是它应该在windowresize上缩放或重新排列。

Answer 1

这是一个可能适合您的解决方案：

<强> Demo Fiddle

只需要有一个悬停状态，您可以更改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;
}

网格布局：创建CSS，以便元素在相邻元素调整大小时保持位置

1 个答案: