Effet d'opacité sur une image.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Effet d'opacité sur une image.

Message par Cali93110 Lun 26 Nov - 18:22

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! Smile

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. Very Happy


Dernière édition par Cali93110 le Lun 26 Nov - 19:14, édité 1 fois
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet d'opacité sur une image.

Message par Invité Lun 26 Nov - 19:08

Salut Cali93110,
pour l'exemple on part d un bloc :
Code:
M14_logo
le logo du FDF ainsi que le lien Wink
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 */

}
Penses à valider les modifications en cliquant sur le bouton "Valider".


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Effet d'opacité sur une image.

Message par Matriochka Lun 26 Nov - 19:11

Coucou,

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;
À toi de modifier selon ton envie Wink

Edit : Aïe, Milouze a été plus rapide !
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet d'opacité sur une image.

Message par Cali93110 Lun 26 Nov - 19:14

Merci à tout les deux pour votre aide!! C'est exactement ça que je cherchais, merci infiniment!
Bonne soirée et bonne continuation. Wink
Cali93110

Cali93110
*****

Féminin
Messages : 512
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum