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 2012 - 20: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
» Ombre autour de mon image de fond, effet surélevé
» Ajouter un effet sur une image
» Image avec un effet slide dessus
» Effet sur image lors du survol de la souris
» Effet 3D
» Ajouter un effet sur une image
» Image avec un effet slide dessus
» Effet sur image lors du survol de la souris
» Effet 3D
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