Problème transition CSS !

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

Résolu Problème transition CSS !

Message par KageNekko le Dim 13 Oct 2013 - 18:43

Bonjour !
Voilà mon forum Test :
http://forum-test.creer-forums.fr/

On peux donc voir deux images :
La première j'ai mit span id dans la P.A.
La deuxième j'ai mit div id.

Mon code HTML :

Code:
<span id="lol"><img src="http://zupimages.net/up/3/976290504.jpg"></span>
<div id="relol"><img src="http://zupimages.net/up/3/976290504.jpg"></div>
Mon code CSS :

Code:
#lol img {
    opacity: 0.8;
    }

#lol img:hover {
    opacity: 1;
    }

#relol img {
    opacity: 0.8;
    }

#relol img:hover {
    opacity: 1;
    }


span.lol {
        -moz-transition:all 0.5s; /* Mozilla Firefox */
        -webkit-transition:all 0.5s; /* Safari et Google Chrome */
        -o-transition:all 0.5s; /* Opera */
        transition:all 0.5s;
    }


div.relol {
        -moz-transition:all 0.5s; /* Mozilla Firefox */
        -webkit-transition:all 0.5s; /* Safari et Google Chrome */
        -o-transition:all 0.5s; /* Opera */
        transition:all 0.5s;
    }
Ce que je veux faire c'est une transition quand l'image devient plus 'claire'.
Je ne connaît pas trop le CSS et donc je ne sais pas trop comment procéder.

Voilà, merci d'avance !

KageNekko
Nouveau membre

Féminin
Messages : 2
Inscrit(e) le : 07/05/2013

http://www.la-guerre-des-clans.com/
KageNekko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème transition CSS !

Message par Self le Dim 13 Oct 2013 - 19:02

Bonjour ^^.

Dans la première partie de votre CSS vous mettez bien le dièse qui indique un ID comme cela:
Code:
#lol
#relol
Et quand vous mettez le span ou la div devant vous transformez cet ID en CLASS.
Je pense qu'il suffit de faire comme cela:
Code:
#lol img {
    opacity: 0.8;
    -moz-transition:all 0.5s; /* Mozilla Firefox */
    -webkit-transition:all 0.5s; /* Safari et Google Chrome */
    -o-transition:all 0.5s; /* Opera */
    transition:all 0.5s;}
 
#lol img:hover {
    opacity: 1;
    -moz-transition:all 0.5s; /* Mozilla Firefox */
    -webkit-transition:all 0.5s; /* Safari et Google Chrome */
    -o-transition:all 0.5s; /* Opera */
    transition:all 0.5s;}
 
#relol img {
    opacity: 0.8;
    -moz-transition:all 0.5s; /* Mozilla Firefox */
    -webkit-transition:all 0.5s; /* Safari et Google Chrome */
    -o-transition:all 0.5s; /* Opera */
    transition:all 0.5s;}
 
#relol img:hover {
    opacity: 1;
    -moz-transition:all 0.5s; /* Mozilla Firefox */
    -webkit-transition:all 0.5s; /* Safari et Google Chrome */
    -o-transition:all 0.5s; /* Opera */
    transition:all 0.5s;}
Ce qui donne un transition de 0.5 secondes au passage de la souris et quand la souris s'en va.

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Problème transition CSS !

Message par KageNekko le Dim 13 Oct 2013 - 19:11

Oh, merci beaucoup ! Smile

KageNekko
Nouveau membre

Féminin
Messages : 2
Inscrit(e) le : 07/05/2013

http://www.la-guerre-des-clans.com/
KageNekko 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