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

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

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
 
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

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:

Discussioni simili