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
Scritto da Shor
Altri articoli:
Articoli correlati a "Effetto opaco per 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
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
Era da un bel po di tempo che non segnalavo qualche tecnica per applicare effetti alle immagini in css. Oggi voglio spiegarvi come applicare un
Alzi la mano chi non ha mai sentito nominare il celebre Andy Warhol, l'artista che secondo molti avrebbe lanciato la pop art. Forse vi ricorderete
Grazie alla segnalazione di Manicalarga, scopro questo simpatico software per trasformare le immagini in fumetti.
Si chiama Rotoscope, è un applicazione gratuita, con la quale è
Ecco una guida per applicare un effetto acqua in movimento alle immagini in maniera semplice e veloce come vedete nel logo di Geekissimo qui sopra.
Per
Accidenti, mancano ancora 2 gadget che abbiamo finito... Che peccato, ogni giorno recensisco qualcosa sempre più bello.
Quello di oggi è un oggetto davvero particolare che
In questo periodo va di moda il web2.0, tutti bottoni tondeggianti e immagini specchiate, ma se non avete la giusta esperienza con software di grafica
Ecco un sito molto carino che ci permette di poter applicare una serie di immagini alle vostre foto direttamente online senza bisogno di scaricare sowtware,
Ecco a voi un illusione ottica che vi stupirà sicuramente. Come vedete nell'immagine qui sopra, ci sono 2 facce di una donna, quella a sinistra
This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.
8 Commenti
Scritto da Shor
Il problema è che questo sistema non passa la validazione css.
Ciao.
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
Ciao Shor, purtroppo questo metodo non va bene in IE per un conflitto di filtri.
Clicca su Mega69 per maggiori dettagli.
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
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…
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.
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!?
Bellissimoooo