inserimeno immagini

Ciao a tutti

sono nuovo e già ho un problemino

Vorrei inserire un'immagine piccola che quando con il mouse ci passo sopra si ingrandisca e fino qui nessun problema inserendo il codice qui sotto

Codice HTML:

---

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail span{ /*carateristiche dell'immagine ingandita e del testo relativo*/
position: absolute;/* mettere: relative invece di absolute per dare una posizione relativa alla foto piccola*/
background-color: lightyellow;/*colore sfondo della foto*/
padding: 5px;/*cornice*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*caratteristiche dell'img ingrandita*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*posizione dell'img ingrandita*/
visibility: visible;
top: 100;/*posizione verticale dell'img */
left: 60px; /*posizione orizzontale dell'img */

}

</style>


<table border="1" width="200">
  <tbody><tr>
    <td><a class="thumbnail" href="#thumb"><img src="http://donnaperlacrea.altervista.org/alterpages/medium/sam_0196-1440717365669.jpg" height="66" border="0" width="100"><span><img src="http://donnaperlacrea.altervista.org/alterpages/medium/sam_0196-1440717365669.jpg" height="264" width="400"><br>Nome Foto 1</span></a>
</td>
    <td><a class="thumbnail" href="#thumb"><img src="http://donnaperlacrea.altervista.org/alterpages/medium/sam_0196-1440717365669.jpg" height="66" border="0" width="100"><span><img src="http://donnaperlacrea.altervista.org/alterpages/medium/sam_0196-1440717365669.jpg" height="264" width="400"><br>Nome Foto 1</span></a>
</td>
    <td><a class="thumbnail" href="#thumb">punto 3<span><img src="FOTO3.jpg" height="66" border="0" width="100"><br>Nome Foto 3</span></a>
</td>
  </tr>

</tbody>
</table>

---

Non riesco a risolvere il problema di portare la foto piccola dietro la foto grande

Le prove, inserendo la funzione z-index: 0; in varie parti, le sto facendo sul sito

http://donnaperlacrea.altervista.org/merletti.html

in fondo alla pagina

Spero di essere stato chiaro

ciao ciao

Z-index -1 fa andare l'elemento dietro agli altri, z-index 1 lo fa andare davanti.
Poi dipende sempre se lo imposti diversamente a tutti gli altri

però non so dove inserire questo Z-index -1 oppure Z-index 1

ho provato ad inserirlo all'inzio al posto di z-index: 0; ma pare che non funzioni

Prova a dare z-index:-1 a

Codice:

---

.thumbnail:hover span{ /*posizione dell'img ingrandita*/
visibility: visible;
top: 100;/*posizione verticale dell'img */
left: 60px; /*posizione orizzontale dell'img */

}

---

Ciao

inserendo il codice z-index:-1 adesso mi viene l'immagine grande dietro a tutte e 2 le foto piccole (ossia proprio l'opposto di quello che voglio).

Ho provato anche ad impostare z-index:0 oppure z-index:1 sempre in quella sezione ma non succede niente

Si in effetti è giusto che faccia così, errore mio :tongue
Prova invece a dare z-index -1 alle due immagini piccole e z-index 1 a quelle grandi.
Prova anche a mettere lo <span> fuori dall'<a>
.thumbnail sarebbe la classe di un <a> giusto?
Ti converebbe dare gli zindex alla img... E vuoi che quando il mouse passa sopra l'immagine se ne crei una ingrandita o si ingrandisca la stessa?

ok grazie adesso va

era un z-index 0 in alto che mi bloccava tutte le altre funzioni

Ciao ciao