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

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
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
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
 

connect

Nuovo Utente
15 Set 2013
5
0
0
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
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
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
 

connect

Nuovo Utente
15 Set 2013
5
0
0
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?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
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
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
andreas88 creare effetto zoom su una immagine HTML e CSS 2
C Aiuto Effetto Lente/Zoom Flash Flash 1
C Effetto zoom! Flash 5
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
S [HTML] Effetto su testo da togliere HTML e CSS 0
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [HTML] Effetto hover in un div HTML e CSS 6
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
R Effetto sul testo Javascript 3
K Effetto psichedelico Flash 0
G Effetto mosso tipo calce. Photoshop 1
P Effetto spruzzo di profumo Photoshop 1
J Aggiunta di un effetto di transizione al plugin Quick Pager jQuery 0
L effetto galleria popup (immagini) jQuery 1
M effetto del testo css HTML e CSS 1
Z Effetto pennello con Flash Flash 0
P Visualizzare video mp4 con effetto lightbox jQuery 1
L Effetto fade a div Javascript 1
L Effetto hover con jquery jQuery 2
F effetto movimento immagini jquery jQuery 3
matteoraggi Come si fa a ricreare l'effetto dei pesciolini? WordPress 3
F Effetto comparsa header Javascript 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
J effetto sliding dors come cover per entrare in un sito JQ Javascript 0

Discussioni simili