[CSS + HTML] Porzione immagine e anteprima

[Karkatys]

Ciao ragazzi, dovrei fare una cosa abbastanza semplice in teoria ma che mi sta creando un po' di problemi nella pratica. Vorrei mettere nel mio sito delle piccole anteprime di immagini e far sì che, al passaggio del mouse, queste si allarghino fino a visualizzare l'immagine a dimensione naturale. Ora ho questo codice CSS che mi permette di visualizzare l'anteprima:

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

.thumbnail:hover {background-color: transparent;
z-index: 9}

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none}

.thumbnail span img {/*CSS for enlarged image*/
border-width: 0;
padding: 2px}

.thumbnail:hover span {/*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px}

Quindi a questo punto vado ad integrare nel mio codice HTML un semplice codice per visualizzare le due immagini (Una più piccola per la preview e una più grande, quella a dimensioni originali):

<a class="thumbnail"><img src="LINK MINIATURA"><span><img src="LINK DIMENSIONI ORIGINALI"></span></a>

Ecco il problema, io non vorrei usare due immagini differenti, ma vorrei usare la stessa immagine (Quella a dimensione originale) e ritagliarla per visualizzare l'anteprima! Quindi avrei un'immagine sola, tramite il codice ne visualizzo solo una piccola parte e quando passo sopra il mouse la vedo a dimensioni originali. Per fare ciò ho trovato la proprietà clip:

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Il problema è che sì, l'immagine in miniatura viene visualizzata correttamente, ma quando passo sopra il mouse anche l'immagine che viene fuori (Quella che deve essere a dimensioni originali) si ritaglia! Sapete aiutarmi? Grazie!

[Rikiji]

perchè

Codice PHP:

img { ... } 


ha effetto su tutte le immagini, anche se hover. Sulle immagini in hover devi togliere la proprietà clip

[MaxArt]

Il problema è molto semplice, devi saper usare correttamente i selettori del CSS. In questo caso, il tuo errore è che hai indicato a TUTTI gli elementi img di essere ritagliati, non solo quelli che ti interessato.
Fai così:

.thumbnail>img {clip:rect(0px,60px,200px,0px);}

Questo vuol dire: applica a tutti gli elementi img che sono figli diretti degli elementi con classe "thumbnail".
Altre note:

Originariamente inviato da Karkatys

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none}

.thumbnail span img {/*CSS for enlarged image*/
border-width: 0;
padding: 2px}

.thumbnail:hover span {/*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px}

1. "none" non è un colore: usa "transparent", come hai fatto prima;
2. il vecchio trucco di spostare gli oggetti sulla sinistra non è molto bello, soprattutto se non ne hai bisogno (anzi, complica le cose). Usa display: none, lascia left: 60px e vivi tranquillo;
3. visibility: hidden diventa del tutto inutile. In alternativa, usalo al posto di display: none.
La classe .thumbnail:hover span diventa semplicemente {display: inline;}. Ricorda che il browser deve applicare ripetutamente i due stili ogni volta che passi sopra col mouse. Meno ne applica e meglio vive.

Inoltre: vuoi davvero usare un tag "a" per inglobare anteprima e immagine? Tanto la proprietà href manco la usi, tanto vale usare uno span, un div, un label e mettergli cursor: pointer come stile (immagino volessi emulare la presenza della mano puntata).

[Karkatys]

Grazie MaxArt, gentilissimo e disponibile. Ho risolto tutto, grazie anche a Rikiji! Preferisco mantenere il tag a in quanto sono nuovo nel campo del CSS/HTML e non voglio complicarmi la vita. Vi chiedo soltanto un'ultima cosa. L'immagine ritagliata è possibile spostarla per visualizzare solamente l'anteprima che voglio io? Cerco di mettercela tutta e provare a ragionare senza avere tutto sul piatto d'argento. Allora, ho il codice:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Vado a sostituire img con .thumbnail>img in quanto lo spostamento deve essere applicato solo alle immagini a cui è stata applicata la classe thumbnail. Quindi ho provato con:

.thumbnail>img
{
position:absolute;
left:10px;
}

Ma non succede nulla. Devo forse cambiare il valore di position? Oppure devo cambiare il valore di position nella porzione di codice:

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none}

Grazie ancora!

[MaxArt]

Originariamente inviato da Karkatys

Preferisco mantenere il tag a in quanto sono nuovo nel campo del CSS/HTML e non voglio complicarmi la vita.

E che differenza ti fa usare uno span?
Consiglio: usa gli elementi HTML per il significato che essi hanno. Un <a> serve per i collegamenti. Un <div> per riquadri generici. Uno <span> per un contenitore generico "inline". E così via.

L'immagine ritagliata è possibile spostarla per visualizzare solamente l'anteprima che voglio io?

Eh?
"Spostare" in che senso? Spiegati o non ti posso aiutare.

Ma non succede nulla.

Altro consiglio: non usare MAI e poi MAI una locuzione del genere quando si tratta di risolvere problemi di programmazione. Devi invece spiegare:
1. che azione hai fatto;
2. cosa ti aspettavi che accadesse;
3. cosa invece è accaduto.
Tutti ti sapranno aiutare meglio.