1 CSS : Changement d'opacité 30/5/2009, 15:14
Ce tutoriel a été publié par final-blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum. |
Hello,
Après une auto-prise de tête, voilà comment faire pour que le over sur une image rendue floue devienne nette, et que ça fonctionne sur les 3 navigateurs (MF, IE et Opera), exemple ICI.
(Sorry les admins et modos, vous devrez diviser ce sujet. Un sorry spécial pour Milouze et Nirupan...)
Dans le CSS :
Le code d'opacité est celui de ce tuto et vous y retrouverez toutes les explications des valeurs en rouge ici de ze_chaofan./* TOGGLE OPACITE */
.toggleopacity {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.toggleopacity:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}
.toggleopacity img{ border: 1px solid #cccccc; }
.toggleborder:hover img{ border: 1px solid navy; }
Pour les orange, c'est à votre goût...
Pour du texte :
- Code:
<span class="toggleopacity">TEXTE ICI</span>
Pour le code de l'image :
- Code:
<span class="toggleopacity"><img src="URL_DE_L'IMAGE" /></span>
De manière générale :
- Code:
<span class="toggleopacity">CONTENU CHANGEANT D'OPACITE</span>
EDIT : Merci Nirupan, mais pour la l'opacité des images, c'est le dernier code css qui est valable si on veut que ça fonctionne au moins sur les 3 navigateurs de base^^
Dernière édition par final-blond le 23/12/2009, 17:13, édité 4 fois