Geekissimo

Effetto opaco per immagini con Css

 
Shor (Angelo Di Veroli)
17 Maggio 2007
8 commenti

Se volete utilizzare nel vostro sito immagini con effetto opaco anche detto “effetto Off”, non c’è bisogno di utilizzare 2 immagini differenti.
Potete risparmiare moltissimo tempo grazie al codice Css. Una volta che passate con il mouse sopra l’immagine opaca “si accende” e otterrete l’effetto desiderato. Per applicare questo effetto alle vostre immagini seguite i semplici punti che seguono:

Codice da inserire nel vostro foglio di stile css

a.linkopaco img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

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

Codice html dell’esempio qui sopra

Categorie:
Potrebbe interessarti anche
Articoli Correlati
CSSEZ, nuovo ottimo generatore on-line di temi per WordPress e MovableType

CSSEZ, nuovo ottimo generatore on-line di temi per WordPress e MovableType

Come già giustamente sottolineato più volte, oltre i contenuti (che sono la cosa fondamentale), in un blog anche l’occhio vuole la sua parte e quindi un tema grafico bello da […]

29 stili diversi in Css per Google Adsense

29 stili diversi in Css per Google Adsense

Ecco a voi una serie di 29 stili per personalizzare i vostri annunci contestuali di Google Adsense. Per inserirli all’interno del vostro sito o blog dovete cliccare su “View Code” […]

Video Tutorial: come modificare il tema wordpress in 5 minuti con FireBug

Video Tutorial: come modificare il tema wordpress in 5 minuti con FireBug

Dopo avermi segnalato la guida su come creare e utilizzare più profili contemporaneamente in Firefox, Daniele Salamina, mi avverte che ha creato un Video Tutorial su come modificare il proprio […]

Bottoni sexy con CSS

Bottoni sexy con CSS

Geekissimo Dopo la guida sull’effetto opaco per immagini con Css e la guida sull’effetto Popup sulle immagini con CSS, eccone un altra molto utile. Grazie a questa guida potremo realizzare […]

Effetto Popup sulle immagini con CSS

Effetto Popup sulle immagini con CSS

Qui potete aggiungere una descrizione Dopo la guida della scorsa settimana sull’effetto opaco per le immagini con Css, oggi vi spiegherò come applicare un effetto popup alle immagini sempre con […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

  • #1sergio drago

    Il problema è che questo sistema non passa la validazione css.
    Ciao.

    17 Mag 2007, 3:26 pm Rispondi|Quota
  • #2Shor

    a non ci avevo provato a validarlo, comunque se non si ha un sito perfetto va bene 🙂

    altrimenti il vecchio metodo delle 2 immagini va sempre bene pure quello

    17 Mag 2007, 4:15 pm Rispondi|Quota
  • #3Mega69

    Ciao Shor, purtroppo questo metodo non va bene in IE per un conflitto di filtri.
    Clicca su Mega69 per maggiori dettagli.

    17 Mag 2007, 7:35 pm Rispondi|Quota
  • #4Shor

    grazie mega69 ma questo metodo va bene anche per IE, non va bene se inserisci erroneamente immagini con sfondo trasparenti PNG, ma quelle a prescindere il motore il di IE non le digerisce.

    Ho cambiato il formato in Jpg e l’effetto si vede perfetto anche su IE.

    Comunque grazie per avermi avvertito altrimenti non me ne sarei accorto che avevo messo una PNG.

    Grazie 🙂

    17 Mag 2007, 8:26 pm Rispondi|Quota
  • #5Mega69

    Prego 🙂

    Comunque per chi non lo sapesse c’è un trucchetto per inserire le png anche su IE6 ( il link è su Mega69 );
    quello che volevo evidenziare è proprio il fatto che tale trucchetto non funziona se vogliamo fare questo tipo di rollover…

    18 Mag 2007, 12:14 pm Rispondi|Quota
  • #6Mario

    Dà problemi anche grazie agli ActiveX in IE 6. Dalla release di Dreamweaver 8.02 in poi dicono di aver creato un tool per fare l’hack del problema tuttavia sebbene funzioni per gli object Flash, a me non elimina la barra per l’opacità via css.

    21 Mag 2007, 11:02 pm Rispondi|Quota
  • #7Alessandro

    Ciao ragazzi, io ho provato tutto e funziona tutto, ma come faccio a mettere dentro ad un box opaco una immagine che siveda bene e non con lo sfondo del box!?

    19 Giu 2007, 11:05 am Rispondi|Quota
  • #8Fabri

    Bellissimoooo 🙂

    11 Nov 2007, 7:14 pm Rispondi|Quota