Я хочу создать простую галерею изображений в сетке, и я использую что-то вроде этогоУвеличить при наведении для увеличения скрытых изображений. Но вместо табличного стиля по ссылке я бы предпочел использовать 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

Я пробовал макеты, как в следующих примерах, и один из них выполнял смещение под элементами, а другой - не «hover-zoom», так как все элементы были фиксированного размера:

отзывчивый-имидж-сетка

Сетка изображения, используя-CSS-поплавки

btw: в теге привязки я использую style = "..." (соответствует ли int-style html5-соответствие btw?) для индивидуального смещения плиток, чтобы создать немного случайного эффекта, но также не уверен если бы я поместил его туда, в тег li или тег img. Я просто не хочу помещать это в CSS для каждого изображения. Наконец все должно выглядеть так:

Есть ли у вас какие-либо советы или рука помощи для очень аккуратного и легкого CSS? Мне не нужно ничего особенного, я обрежу все свои эскизы вручную (ну, с помощью фоторедактора, а не ножниц), и если это будет слишком сложно, я также сделаю всю сетку фиксированного размера, без возможности изменения размера , Но желательно, чтобы он масштабировался или изменял размер окна.