Immagini rollover in wordpress

piemusc

Immagini rollover in wordpress

Buonasera a tutti gli utenti del forum di gt,
sto realizzando un sito in wordpress, e dv realizzare un effetto rollover su una galleria di immagini. Un rollover semplice del tipo, a riposo con opacità dell'immagine,e a rollover attivo con un risultato nitido dell' immagine.
Sò che ci sono dei plugin per ottenere un rollover, però se è possibile vorrei scrivere il codice evitando di installare il plugin.
Sul CSS importato ho inserito il seguente codice:

.gallery img a{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.gallery img a:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

e all'interno del post che ospita la mia gallery ho richiamato la classe :

naturalmente non ho ottenuto il risultato che mi aspettavo...dove sbaglio?
C'è un alternativa al plugin?
Un grazie a tutti coloro che interverranno. ciao a tutti

fda

Ciao Piemusc.
Prova questo codice nel CSS:

a.galleria {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.galleria:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

Con le immagini in questo modo:
<a class="galleria" href="#"><img src="percorsoimmagine"></a>

Nota. Per ottenere un effetto morbido sostituisci il codice sopra con questo:

a.galleria {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
a.galleria:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

Non so se faccia al caso tuo. Fammi sapere. Saluti
F.

piemusc

Ciao FDA grazie per aver risposto:) provo subito questa soluzione e ti faccio sapere grazie ancora ciao;):)

piemusc

Perfetto! funziona alla grande sia la prima soluzione che la seconda.. Grazie mille per il tuo aiuto!!!! ;):)

lastrobt

Ciao piemusc,
ecco a te:

.galleria {
display:block;
filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;}

.galleria:hover {
display:block;
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

Edit: non avevo aggiornato la pagina e mi sono accorto solo dopo aver inviato che era già stata inviata una soluzione al problema, meglio così!

piemusc

grazie mille lo stesso Lastrobt!

piemusc

Se vi farà piacere a lavoro compiuto vi linkerò il sito con l'effetto realizzato grazie al vostro aiuto!!! Ciao!

fda

Bene. Ciao