Image qui s'éclaircit au passage de la souris
 :: Codage :: Tutoriel pour structure Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Voir le profil de l'utilisateur
Fondateur, lézard overbooké et caféiné
Crédit avatar : Test1
Ses absences : -
Commentaire(s) du joueur : Je suis le fondateur et administrateur principal de ce forum mais je ne mord pas alors n’hésitez pas à me solliciter ! Smile
➔Mon compte joueur est : Ilclaste Sang-blanc
Reserve de point(s) : 163
Shay Altanir a écrit:
Exemple (ne faites pas attention au reste)

Il ne me semble pas avoir vu de tutoriel pour faire ça donc j'en propose un :
En fait c'est très simple il suffit de faire une class à l'image qui vous intéresse, puis mettre ce code dans le CSS (affichage → couleur → Feuille de style CSS)

Code:

/* Opacité images */
           
 .opac {
    opacity: 0.5;
/* formule firefox */
    filter: alpha(opacity=50);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;
            }
       
  .opac:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;     
                    } 
/* Fin opacité image */


Et le html qui peut se mettre partout!
Code:
 <img src="lien de l'image" class="opac"/>

Il est important de garder la cellule de tableau pour que la luminosité se baisse dès qu'on quitte la souris! Si vous avez des questions où que vous voulez régler l'opacité n'hésitez pas à me demander! ♥
Jeu 23 Aoû - 14:57
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers: