Effetto hover cambio immagine

[hidran]

Per il cambio di immagine, potresti usare la proprietà background-url ma tutte avrebbero la stessa url quando fai
hover.
L'alternativa sarebbe con javascript puro o Jquery, usando i selettori puoi cambiare l'immagine in base all'ID dell'immagine
oppure al title dell'immagine

[rhew90]

Per il cambio di immagine, potresti usare la proprietà background-url ma tutte avrebbero la stessa url quando fai
hover.
L'alternativa sarebbe con javascript puro o Jquery, usando i selettori puoi cambiare l'immagine in base all'ID dell'immagine
oppure al title dell'immagine

Grazie mille per la risposta,

mi va benissimo che in tutte le immagini ci sia poi la stessa con l'hover, xke sarà semplicemente una png con scritto scopri su tutte le immagini

ho provato con background-image url ma non funziona.

[hidran]

Ciao,
Il background-url glielo devi dare al link e non all'immagine: Deve essere al contenitore dell'immagine.

Usa questo trucco:

.imageLink:hover img {display: none;}  /* nascondo immagine originale*/
.imageLink:hover {
    background: url(css3.png) no-repeat;  /* metti url nuova immagine*/
 width: 200px; /* deve essere identico al width dell'immagine altrimenti si vede il "flick"

    height: 200px;    display: inline-block; /* idem per width*/
}

L'unica idea che mi viene usando CSS è questa.
Senza vedere com'è fatto l'html è un po' pi difficile
Questa soluzione l'ho provata e funziona: almeno lo swipe dell'immagini
Puoi aggiungere altre proprietà css3 come transition ecct.

[rhew90]

[QUOTE=hidran;25341549]Ciao,
Il background-url glielo devi dare al link e non all'immagine: Deve essere al contenitore dell'immagine.

Usa questo trucco:

.imageLink:hover img {display: none;}  /* nascondo immagine originale*/
.imageLink:hover {
    background: url(css3.png) no-repeat;  /* metti url nuova immagine*/
 width: 200px; /* deve essere identico al width dell'immagine altrimenti si vede il "flick"

    height: 200px;    display: inline-block; /* idem per width*/
}

Perfetto grazie mille funziona.

Ti chiedo ancora se è possibile togliere il display:none perchè vorrei la seconda immagine sovrapposta alla prima in modo da sfruttare la trasparenza png.

grazie