Ingrandire un'immagine al passaggio del mouse 
Autore: Diego S.
Visite 1422,
Followers 1,
Condiviso 0
Vorrei che l'immagine si ingrandisca al passaggio del mouse. Holetto qulcosa nelle altre discussioni ma non riesco a capire dove inserire il codice nella pagina come esperto. Ho fatto diversi tentativi ma sbagli sicuramente qualcosa. Invio in allegato l'esempio del sito.
Ho letto il post di Gabriele p. del 05/04/2014 ma non so dove inserire i codici nella pagina del mio sito e sicuramente sbagli nel dare il percorso dell'immagine.
Grazie, alessandro.
Postato il
Qui puoi trovare un esempio montato sulla 8 di un vecchio script (ora a pagamento): http://www.ilcacciatoredinuvole.it/cloud_zoom_sx/
Se vuoi un semplice effetto, usando l'opzione dell'oggetto immagine (immagine sovrapposta), te la caveresti con due righe di CSS inseriti Prima della chiusura del tag HEAD:
http://lemonsong.altervista.org/test_img_overlay2/
E' solo uno spunto, il numero del selettore è da personalizzare.
Puoi anche assegnare un'ancora alla cella, in questo caso il selettore diventerà:
#tua_ancora + div {
bla bla bla...
}
Se devi applicare l'effetto a più immagini dovrai modificare il selettore.
Autore
Ho fatto come dice lemonsongma il risultato ottenuto è quello che posto in allegato.
Ho inserito il codice CSS Prima della chiusura del tag HEAD. L'ho copiato due volte: la seconda volta ho cambiato il valore #imCell_1in #imCell_per la seconda immagine.
Come procedimento ho seguito il seguente: in creazione pagine/strumento immagine (inserisco l'immagine per la miniatura) / visualizzazione / immagine sovrapposta (e inserisco l'immagine).
La risoluzione delle immagini è 1280x720 px. Forse dovrei creare due immagini: una piccola per la miniatura e poi una grande per l'immagine ingrandita magari con risoluzioni più piccole (per es. 600x800).
Vorrei che l'immagine ingrandita fosse al centro come nell'esempio di lemonsong.
Grazie, alessandro.
Autore
Ho dimenticato di aggiungere che nella pagine devo inserire 7 immagini.
Grazie ancora, alessandro.
... per caso, hai visto se possa interessarti e se faccia al caso tuo questo recente Topic con opzioni da Programma...?... https://helpcenter.websitex5.com/post/126210#3
.
ciao
@Alessandro
Sì, le immagini sovrapposte, ovviamente, devono essere di misure adeguate, visto che WS non le "tratta".
Se le vuoi al centro, ovviamente, dovrai scegliere "centro" come allineamento.
Qui un esempio con il codice per più immagini nella stessa pagina:
http://lemonsong.altervista.org/test_img_overlay2/pagina-1.html
Se la pagina contiene solo immagini con quell'effetto, puoi scrivere un CSS3 tipo questo:
<style>
div[id^="imCell_"] {
overflow:visible !important;
}
div[id^="imCell_"]:hover {
z-index: 10001;
}
</style>
Se è quello che cerchi, testalo anche con dispositivi touch (io non l'ho fatto).
Autore
Grazie, tutto OK.