Passe ta souris !

Commencez par vous rendre dans Apparence > Modifier le thème > Ajouter du CSS

• le sélecteur : menu-lastvisitors-avatar correspond aux avatars des derniers visiteurs pour ceux qui utilise Eklablog. Livre à vous de le changer si vous voulez utiliser l'effet sur autre chose.
Personnaliser: vous pouvez changer 0.5 par un nombre entre 0.1 à 1 (1, correspondant à une opacité de 100%).

• opacity correspond à l'opacité.
Personnaliser: vous pouvez changer 0.5 par un nombre entre 0.1 à 1 (1, correspondant à une opacité de 100%).

• transition est la propriété qui correspond à l'action qui se produit sur l'image.
Il est présent 4 fois dans le code précédé de -[...]- qui sert à rendre ce code compatible avec plusieurs navigateurs. Bien qu'il en existe d'autres, je vous ai mis les principaux.

• ease-in-out correspond à l'effet. Ici, on dit au code de faire un effet de progression lorsque l'on passe la souris sur l'image et lorsque l'on la retire.
Personnaliser

• 0.5s correspond au temps que dure l'effet en secondes. En l’occurrence, l'effet dure 5 secondes.
Personnaliser: De la même façon que pour opacity, vous pouvez modifier cette valeur sans oubliez le "s" (pour seconde). Vous pouvez bien sûr modifier par 0.2s, 2s, 3s, 3.5s etc...

• Cette fois-ci, on a ajouter :hover au sélecteur qui signifie "au moment où je passe ma souris".
• On retrouve opacity qui s'utilise de la même façoon que dans la première partie du code.

Pour l'appliquer dans un article par exemple, rendez-vous ici :

puis tapez

• Remplacez URL par l'url de votre image sous forme : http://exeeeemple.fr/
• Remplacez SELECTEUR par le nom du sélecteur que vous avez donné dans la feuille de style. menu-lastvisitors-avatar si vous gardez le même sélecteur ou par le nom du sélecteur que vous avez vous même créé.

Et voilà ! :D Tutoriel terminé, n'hésitez pas à poser des questions si vous avez un problème.