Problème transition CSS !

2 participants

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

Résolu Problème transition CSS !

Message par KageNekko 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 !
avatar

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

Self
Membre actif

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

https://selfback.forumactif.com/
Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème transition CSS !

Message par KageNekko Dim 13 Oct 2013 - 19:11

Oh, merci beaucoup ! Smile
avatar

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

- Sujets similaires

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