Effetto zoom nello stesso riquadro dell'immagine (diverso dal solito)

  • Creatore Discussione Creatore Discussione connect
  • Data di inizio Data di inizio
C

connect

Nuovo Utente
15 Set 2013
5
0
0
Ciao a tutti, mi sono appena iscritto a questo utilissimo forum.
Premetto che sono quasi a digiuno di HTML, (quindi molto ignorante in materia) conosco giusto un po' di codice elementare per fare inserzioni Ebay, ma utilizzo prevalentemente editor WYSIWYG.
Sono giorni che sto cercando un CSS (il piu' semplice possibile, evitando possibilmente script) per l'effetto zoom al passaggio del mouse sopra una immagine.
Ho trovato in rete molti codici per zoom che si aprono nella stessa pagina ma a lato dell'immagine;
mentre l'effetto che desidero è lo zoom al passaggio del mouse nello stesso riquadro dell'immagine stessa.
Questo è l'esempio:
http://www.ebay.it/itm/SUPERGA-K-WA...72887?pt=Uomo_Scarpe&var=&hash=item3f28e71697
Molti script vanno in conflitto all'interno delle inserzioni Ebay, spesso bloccano o ne tardono il caricamento della pagina, percio' la priorità sarebbe un codice senza script e quanto piu' semplice possibile.
Spero possiate aiutarmi, perchè prima che riesca da solo a scrivere il codice me ne dovro' pappare di guide e libroni :)
Grazie mille
 
ciao
se non ho capito male quello che vuoi, prova questo
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
img{
display:block;
float:left;
width:400px; height:284px;
}
img:hover{width:800px; height:568px;}
-->
</style></head>

<body>
<img src="gatto.jpg">nel mezzo di camin<br />
di nostra vita<br />
mi ritrovai per una selva oscura<br />
che la diritta via era smarrita
</body>
</html>
provalo prima di caricarlo si ebay mi raccomando
 
borgo italia ha scritto:
ciao
se non ho capito male quello che vuoi, prova questo
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
img{
display:block;
float:left;
width:400px; height:284px;
}
img:hover{width:800px; height:568px;}
-->
</style></head>

<body>
<img src="gatto.jpg">nel mezzo di camin<br />
di nostra vita<br />
mi ritrovai per una selva oscura<br />
che la diritta via era smarrita
</body>
</html>
provalo prima di caricarlo si ebay mi raccomando
Clicca per allargare...

Ciao, grazie mille per la velocità.
Il codice postato farebbe davvero a mio caso, ma mi sono impuntato su quell'effetto dell'esempio del link ebay sopra, in cui c'è uno zoomin.
Lo trovo molto carino :)
Non capisco se è fattibile solo con Jquery oppure si puo' scrivere senza.
sto cercando dalla pagina di esempio di risalire al codice per avere un'idea, ma ho molti limiti e ci capisco poco.
Speriamo bene
 
ciao
è js, se guardi sotto quando passi il mouse leo vedi.
solo con i css penso che sia un po' difficile.
faccio un paio di prove, poi spero di saperti dire
 
ok thanks. Lo sto cercando con codice semplice sia per posizionarlo facilmente da non esperto, sia per evitare eventuali blocchi da pc vecchi dei visitatori.
Pero' ho provato da Firefox a disinstallare JS dai componenti aggiuntivi e la pagina dell'esempio di Ebay dal link sopra funziona lo stesso, zoom incluso.
Non dovrebbe bloccarsi?
 
ciao
se disabiliti js dovrebbe bloccarsi un po' tutto, se con fire guardi: "tools=>web developper=>page source" si vedono un sacco di script js.
è difficile capire quale gestisce l'immagine per farla apparire ingrandita con la lente e nell'ingrandita il trascinamento (quella si che è js con probailmente delle jq)
comunque comedetto provo e anche a cercare qualcosa di semplice
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.

Discussioni simili

andreas88
creare effetto zoom su una immagine
Risposte
2
Visite
3K
HTML e CSS
andreas88
andreas88
C
Aiuto Effetto Lente/Zoom Flash
Risposte
1
Visite
2K
Flash
carla146
carla146
C
Effetto zoom!
Risposte
5
Visite
2K
Flash
carla146
carla146
G
Eliminare l'effetto refresh di una pagina internet
Risposte
8
Visite
2K
PHP
giuliox13
G
E
telecamera effetto nebbia
Risposte
0
Visite
2K
IP Cam e Videosorveglianza
emiliano
E
S
[Photoshop] Nome di questo effetto (vedi foto)
Risposte
1
Visite
1K
Photoshop
filomeni
filomeni
S
[HTML] Effetto su testo da togliere
Risposte
0
Visite
2K
HTML e CSS
sfranchi
S
F
[Photoshop] Effetto "vetro"
Risposte
1
Visite
2K
Photoshop
gandalf1959
gandalf1959
A
[Photoshop] come poter realizzare il seguente "effetto"
Risposte
4
Visite
1K
Photoshop
andreacroce
A
P
[Photoshop CC] Come posso creare quest'effetto - cerchi concentrici
Risposte
6
Visite
4K
Windows e Software
Perugino76
P
P
[Photoshop] Effetto ombra
Risposte
1
Visite
1K
Photoshop
fratt
F
R
[HTML] Effetto carousel di testo su immagine fissa
Risposte
2
Visite
3K
HTML e CSS
Roberto Garavaglia
R
trattorino
[Javascript] effetto carino sul click mi aiutate?
Risposte
1
Visite
1K
Javascript
macus_adi
macus_adi
Andrea_Ventura
[HTML] Problemi con effetto hover
Risposte
5
Visite
2K
HTML e CSS
Max 1
Max 1
M
[Photoshop] Come posso creare questo effetto ?
Risposte
2
Visite
2K
Photoshop
merlino888
M
T
[Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero?
Risposte
3
Visite
1K
Javascript
WmbertSea
WmbertSea
I
Effetto glowing su immagine con GIMP
Risposte
0
Visite
2K
Webdesign e Grafica
iTonto
I
MimmoMandrillo
[Photoshop] Che effetto è questo?
Risposte
3
Visite
1K
Photoshop
otto9due
otto9due
R
[Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme)
Risposte
2
Visite
2K
Photoshop
robyslick
R
D
[Photoshop] Come arrivare a questo effetto?
Risposte
4
Visite
2K
Photoshop
DiegoDell'Aquila
D
Alto Basso