Image opacité

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

Résolu Image opacité

Message par Feuille d'Or le Ven 23 Aoû 2013 - 12:54

Bonjour bonjour,
Alors voilà je fais un message d'accueil, et sur plusieurs forums je vois des images de faible opacité et quand on passe la souris dessus elle a beaucoup plus d'opacité, enfin bref trouvant ça joli j'aimerais savoir comme fait-on (:
Merci d'avance à celle ou celui qui saura me répondre... ♥


Dernière édition par Feuille d'Or le Ven 23 Aoû 2013 - 13:23, édité 1 fois

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image opacité

Message par Matriochka le Ven 23 Aoû 2013 - 12:59

Bonjour,

Il faut utiliser la propriété d'opacité + transition dans ton CSS:
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Matriochka
+ Hyperactif +

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

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

Résolu Re: Image opacité

Message par Feuille d'Or le Ven 23 Aoû 2013 - 13:05

Euh c'ets à dire, parce que je suis un peu perdue avec le site donné =/

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image opacité

Message par Matriochka le Ven 23 Aoû 2013 - 13:13

Tu as ton image ainsi, que j'ai appelé cobaye pour que tu comprennes ce qu'on va en faire :
Code:
<img src="http://bidule.png" class="cobaye" />
Pour appliquer l'effet que tu veux, voici ce qu'on doit utiliser dans le CSS :

Donc là, par défaut :
Code:
img.cobaye {opacity:0.5;}
Puis au survol :
Code:
img.cobaye:hover {opacity:1;
transition:all 0.5s;}
Donc à la base, on a une image à 50% opaque, et on utilise :hover pour indiquer qu'au survol, cette même image devient à 100% opaque. On utilise la transition pour faire un effet de fondu.

Attention tout de même, là je t'ai donné des propriétés raccourcies, mais si tu veux bien faire, il faut les adapter pour chaque navigateur avec -moz et compagnie ^^

Matriochka
+ Hyperactif +

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

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

Résolu Re: Image opacité

Message par Feuille d'Or le Ven 23 Aoû 2013 - 13:22

Super merci ça marche, oh je suis trop contente grâce à forum actif je vais pouvoir faire le message d'accueil que je souhaitais faire depuis super longtemps ^^ ♥

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or 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