Effet d'opacité sur une image.

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

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

Message par Cali93110 le Lun 26 Nov 2012 - 19: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 2012 - 20:14, édité 1 fois

Cali93110
*****

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

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

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

Message par Milouze14 le Lun 26 Nov 2012 - 20: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://illiweb.com/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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Matriochka le Lun 26 Nov 2012 - 20: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 !

Matriochka
+ Hyperactif +

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 le Lun 26 Nov 2012 - 20: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
*****

Féminin
Messages : 510
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


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