Quero construir uma galeria de imagens simples no layout da grade e estou usando algo como istoZoom ao passar o mouse para ampliar imagens pairadas. Mas, em vez do estilo de tabela do link, prefiro usar uma UL (lista não classificada). Bem, talvez a mesa também esteja ok, você me diz :)

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

Meu problema é - como não sou muito bom nisso - não sei como ajustar o CSS para que os elementos ao redor da imagem pairada não sejam alterados. Tentei algumas coisas como display: block, mas eu acho que eu simplesmente não sei como seria uma maneira fácil de criar isso. Eu não preciso mostrar meus ccs atuais, pois é apenas um monte de merda

Tentei layouts como nos exemplos a seguir, e um fez a alteração dos elementos inferiores, o outro não "passou o mouse", pois todos os elementos tinham tamanho fixo:

grades de imagem responsiva

image-grid-using-css-floats

btw: na âncora, estou usando o estilo = "..." (é o estilo em linha html5-btw?) para mudar individualmente os blocos, criar um efeito aleatório, mas também não tenho certeza se eu colocasse ali, na tag li-tag ou img. Eu só não quero colocá-lo no CSS para cada imagem. Finalmente, tudo deve ficar assim:

Você tem algumas dicas ou ajuda para um CSS muito limpo e fácil? Não preciso de nada sofisticado, cortarei todas as minhas miniaturas manualmente (bem, pelo editor de fotos e não por tesouras) e, se fosse muito complicado, também tornaria toda a grade com um tamanho fixo, sem opção de redimensionamento . Mas preferível, ele deve ser redimensionado ou reorganizado no tamanho da janela.