Ciao! Sto cercando di ottenere l'effetto sulle immagini che si vede su questo sito: http://www.cavolettodibruxelles.it/. Cioè, vorrei l'effetto zoom con mouse over (cosa che riesco a fare) ma che rimangano allo stesso tempo della stessa dimensione, cioè senza uscire dal box. Il cambio di opacità non mi interessa...
Sapreste darmi due dritte sul codice html da inserire? Con firebug non ho trovato la soluzione...
Grazie mille
Gli stili sono commentati
codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zoom</title> <style type="text/css"> figure, figure img{ width:300px;/*larghezza delle tue immagini*/ height:280px;/*altezza delle tue immagini*/ transition: all 0.5s ease; } figure img:hover{ width:120%;/* ingrandimento del 20% in larghezza */ height:120%;/* ingrandimento del 20% in altezza */ margin:-10% 0 0 -10%; /* tiene centrate le immagini */ transform: rotate(7deg);/* ruota l'immagine nell'hover, casomai levalo */ } figure{ display:inline-block; overflow:hidden; } </style> </head> <body> <figure> <img src="image1.jpg" alt="image 1"> </figure> <figure> <img src="image2.jpg" alt="image 2"> </figure> </body> </html>
Io però in quel link vedo solo un effetto di opacity non di zoom
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Forse dovresti considerare l'idea di un paio di occhiali...Originariamente inviata da carlomarangoni
Forse tu dovresti essere meno spiritoso ti fare poco intelligente. Se ti dico che a me l'effetto zoom non appare è perchè è cosi! Non per scrivere ciofeghe che non servirebbero a nessuno ma solo per esprimere una mia impressione e poterti essere utile, ma da quanto vedo oltre che avere necessità del nostro aiuto sei anche indisponente quindi da parte mia arangiati e penso anche da parte di molti altri
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Guarda che non sono io che sto "chiedendo aiuto", io ho illustrato una soluzione, mi confondi con chi ha aperto il post.
Nel link postato come esempio dell'effetto voluto, lo zoom è abbastanza evidente, credo solo tu non lo veda.
Scusami si ho sbagliato con quell'altro.
Per quanto riguarda lo zoom se dico che non lo vedo proprio non lo vedo! Dai tuoi 2000 e rotti messaggi deduco che sei uno che frequenta questo forum e ormai dovresti conoscermi che non dico frignacce.
Prendendo ad esempio la foto con il gelato, se io ci passo con il mouse non vedo zoom ma solo un cambio di opacità poi non so da cosa dipensa se voi vedete una cosa diversa
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Dai, bambini, facciamo da bravi...
Intervengo giusto per confermare quanto indicato da carlomarangoni. Credo sia solo un problema di browser.
@carlomarangoni sarebbe interessante sapere quale browser stai usando.
Personalmente, vedendo il sito su FF e CH l'effetto funziona correttamente; invece su IE9 noto, appunto, che non avviene lo zoom, mentre il cambio di opacità è netto, cioè non avviene la transizione.
Sempre con IE9 noto un problema analogo col codice proposto da lucavizzi, cioè lo zoom avviene ma senza transizione, mentre la rotazione non avviene proprio. Non ho idea se la cosa cambia su IE10 o superiori.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Io confermo ciò che ho detto sia con FF, CH, IE10 confermo e non so dirvi il perchè! Se è una questione di css o js, se sono impostazioni diverse del mie browser, insomma l'opacità sempre altri effetti mai!
Che vi devo dì!
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Ovviamente una transition non può funzionare su IE9 e inferioriori in quanto non sono CSS3 browsers, per questo il mio codice degrada ad uno zoom non graduale.
Sul sito proposto come esempio, evidentemente, viene utilizzato lo zoom di CSS3 per ingrandire le immagini (oppure il transform:scale), di conseguenza lo zoom non avviene affatto nei browser non aggiornati.
Permessi di invio
Rispondi quotando