Ciao,
sto tentando di realizzare una galleria immagini sfruttando l'effetto zoom creato con CSS.
In pratica è il banale trucchetto che carica un img, nel mio caso da un db in django,
di grandezza 50x50 e poi attraverso <span>creo l'effetto zoom caricando l'img più grande quando sono hover col mouse.
Funziona il giochetto solo che non riesco a bloccare la posizione, che vorrei fosse uguale per tutte le miniature,dell'img caricata nello span.In altre parole se creo 10 miniature 50x50 poste in verticale
quando ci passo sopra col mouse si apre l'ingrandimento a dx ma si allinea con la miniatura relativa
e man mano scendo, scende anche l'img caricata, uscendo addiruttura dal footer...
html:
<a href="#" class="fotozoom">[img]{{foto.link_fotografia}}[/img]
<span>[img]{{foto.link_fotografia}}[/img]</span></a>
css:
.Galleria a.fotozoom img {border:solid 1px #7c7c7b;float:left;}
.Galleria a.fotozoom span{margin-left:120px; position: absolute; visibility: hidden; width:50px; height:50px; margin:0px;padding:0px;float:left;}
.Galleria a.fotozoom {position:relative; z-index:0;display:block;width:50px;height:50px;margi n:0px;padding:0px;}
.Galleria a.fotozoom:hover {z-index:1;}
.Galleria a.fotozoom:hover span {visibility:visible;position:absolute; top:0px;left:100px;margin-bottom:100;}
PS:Esiste la possibilità di creare un evento con css in corrispondenza del click?
Grazie.