images thumbnail

[Luca_pluatrco]

Salve,

è possibile utilizzando solo CSS creare delle thumnails a partire da immagini salvate lato server?
L'idea sarebbe quella di usare un div per contenere le thumbnail e aumentarne le dimensioni dinamicamente utilizzando la proprietà :hover.

Le immagini verrebbero ridimensionate automaticamente o è necessario salverle in formato ridotto?

Grazie in anticipo!

[emnlmn]

Potresti inderire le immagini direttamente con il tag <img /> e variarne le dimensioni con il css e la pseudoclasse :hover.

[Luca_pluatrco]

Ci avevo provato:

.thumbBox
{
	float:right;
	width:100px;
	height:100px;
	line-height:100px;
	overflow:hidden;
	position:relative;
	z-index:1;	
}

.thumbBox img
{
	float:left;
	position:absolute;
	top:-50px;
	left:-90px;		
}

.thumbBox:hover img
{
	width: 450px;
        z-index:9000;
	height: 375px;	
}


<div class="thumbBox">
    <img ...>
</div>

Tuttavia il risultato non è affatto quello che mi aspettavo. Vorrei che l'immagine si espandesse/ingrandisse al mouse over, senza spostare in basso il contenuto che vi sta intorno, ma piuttosto sopra di questo (motivo per cu iho usato z-index).

Dove è lo sbaglio?

[emnlmn]

Prova a vedere se l'esempio che ti ho fatto è esatto:
esempio

[Luca_pluatrco]

Perfetto!
Diciamo che l'obiettivo sarebbe proprio quello...ora applichero' le modifiche al mio codice e vedremo se funziona (considerando anche il codice che sta "attorno")

Per il momento grazie!!!

[emnlmn]

Beh certo, bisogna vedere se nel contesto poi funziona... per qualsiasi cosa chiedi pure!

[Luca_pluatrco]

Ho applicato ora il codice e funziona bene.
C'è tuttavia ancora un punto che lo rende non utilizzabile nel contesto attuale:

Alcune immagini sono di grandi dimensioni (2100x120, nel caso di un banner per l'header). Quindi a 100x100 (ma anche 400x400) l'immagine è notevolmente distorta e praticamente irriconoscibile.

Ci sono degli accorgimenti che è possibile adottare in modo da rendere le immagini abbastanza proporzionate, pur essendo tra loro molto diverse e senza usare immagini ad-hoc come preview?

Qui il codice usato per il <div> che contiene la preview e gli altri elementi:

<div class="FormFieldControl ">   
   <span>
      <input type="file" />
      <input type="submit" />

      <div class="thumbBox">
         <img ...>
      </div>

   </span>
</div>


.FormFieldControl 
{
  Forms.css (riga 130)
  background-color:White;
  float:right;
  margin:0;
  padding:8px 5px;
  width:70% !important;
}

Grazie

[emnlmn]

Ho modificato il codice dell'esempio che ti avevo fatto, in questo modo dovresti riuscire a gestire meglio le proporzioni delle immagini, se queste non sono fisse o prestabilite.
secondo esempio

[Luca_pluatrco]

Il codice mi sembra lo stesso:

.thumbBox {
	width:100px;
	height:100px;
	position:relative;
}

.thumbBox img {
	width:100px;
	height:100px;
	position:absolute;
}

.thumbBox img:hover {
	height:400px;
	width:400px;
}

Oppure sono io che non riesco a vedere le modifiche?

[emnlmn]

Svuota la cache !