Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

Self
Membre actif

Masculin
Messages : 3717
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