Effetto hover cambio immagine

[rhew90]

Salve a tutti,

ho trovato tantissimi effetti di cambio immagine al passaggio del mouse con i css ma nessuno fa al caso mio.

Dovrei cambiare immagine o far uscire del testo su tutte le immagini del sito.
I punti fondamentali che bisogna sapere sono:
- le immagini hanno una classe in comune (cosa positiva)
- non posso modificare la sorgente html ma posso solo aggiungere delle regole css.

come potrei fare?

al momento sulle immagini ho questa regola
zoom al passaggio del mouse.

.imageLink img {
-webkit-transition: all 0.2s ease; /* Safari and Chrome */
-moz-transition: all 0.2s ease; /* Firefox */
-o-transition: all 0.2s ease; /* IE 9 */
-ms-transition: all 0.2s ease; /* Opera */
transition: all 0.2s ease;
max-width: 100%;
}
.imageLink:hover img {
-webkit-transform:scale(1.05); /* Safari and Chrome */
-moz-transform:scale(1.05); /* Firefox */
-ms-transform:scale(1.05); /* IE 9 */
-o-transform:scale(1.05); /* Opera */
transform:scale(1.05);
}


grazie a tutti

[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