Effet d'opacité sur une image.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Effet d'opacité sur une image.
Bonsoir!
Je recherche le code CSS (de préférence) pour donner un effet d'opacité à une image, qui reprends ses couleurs progressivement au survol de la souris. Le top du top serait que ça fonctionne sous la plus part des navigateur. J'ai trouvé un code qui ne fonctionne malheureusement que sous Firefox... Merci d'avance!
EDITE: J'ai trouvé un code CSS qui fonctionne, mais je souhaiterai obtenir un effet en fondu.
Merci.
Je recherche le code CSS (de préférence) pour donner un effet d'opacité à une image, qui reprends ses couleurs progressivement au survol de la souris. Le top du top serait que ça fonctionne sous la plus part des navigateur. J'ai trouvé un code qui ne fonctionne malheureusement que sous Firefox... Merci d'avance!
EDITE: J'ai trouvé un code CSS qui fonctionne, mais je souhaiterai obtenir un effet en fondu.
- Code:
.opac{
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
.opac:hover{
opacity : 0.95;
-moz-opacity : 0.95;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
Merci.
Dernière édition par Cali93110 le Lun 26 Nov - 19:14, édité 1 fois
Re: Effet d'opacité sur une image.
Salut Cali93110,
pour l'exemple on part d un bloc :
La C.S.S:
a++
pour l'exemple on part d un bloc :
- Code:
M14_logo
- Code:
<div id="M14_logo">
<a href="http://forum.forumactif.com/forum"title="Voir le FDF">
<img src="http://2img.net/i/bl/logo.png" id="i_logo" border="0" alt="F.D.F">
</div>
La C.S.S:
- Code:
#M14_logo
{
height:57px;
width:75px;
cursor:pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*LE LOGO */
#i_logo
{
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
filter : alpha(opacity=50); /* IE < 8 */
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#M14_logo:hover #i_logo
{
opacity : 0.95;
-moz-opacity : 0.95;
-ms-filter: "alpha(opacity=95)"; /* IE 8 */
filter : alpha(opacity=95); /* IE < 8 */
}
a++
Invité- Invité
Re: Effet d'opacité sur une image.
Coucou,
Pour intégrer un effet de fondu il faut utiliser les propriétés de transition CSS :
Edit : Aïe, Milouze a été plus rapide !
Pour intégrer un effet de fondu il faut utiliser les propriétés de transition CSS :
- Code:
transition:all 0.1s;
-moz-transition:all 0.1s;
-webkit-transition:all 0.1s;
-o-transition:all 0.1s;
Edit : Aïe, Milouze a été plus rapide !
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Effet d'opacité sur une image.
Merci à tout les deux pour votre aide!! C'est exactement ça que je cherchais, merci infiniment!
Bonne soirée et bonne continuation.
Bonne soirée et bonne continuation.
Sujets similaires
» Ajouter un effet sur une image
» Image effet spoiler: Script Java SlideToggle com
» Probleme image dans l'Effet Tournepage [Résolu]
» Image avec un effet slide dessus
» Effet sur image lors du survol de la souris
» Image effet spoiler: Script Java SlideToggle com
» Probleme image dans l'Effet Tournepage [Résolu]
» Image avec un effet slide dessus
» Effet sur image lors du survol de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum