Ajouter des effets au survol de la souris sur une image
Afin d'animer vos pages vous pouvez mettre des effets sur les images très simplement, ces effets peuvent être :
- des effets de “passage” de la souris : éclaircissement ou assombrissement de l'image, …
- des effets de changement de couleur : noir&blanc vers couleur, effet sépia, …
- des effets de mouvements de l'image : zoom, rotation…
Ces effets sont présentés un peu plus bas dans cet article.
Comment réaliser l'effet au survol de la souris sur une image ?
Pour l'effet désiré il faut copier-coller au bon endroit un bout de code spécial. Ce code est présenté dans les exemples ci-dessous, pour le trouver voici un exemple :
Où positionner le code pour réaliser l'effet ?
Il faut désormais coller ce code au bon endroit dans votre image.
Pour cela, quand vous êtes en modification de la page (ou widget) où se trouve votre image, cliquez sur l'image, vous verrez une petite barre s'affiche avec notamment un crayon (qui signifie “modifier l'image”), cliquez sur le crayon
Ensuite dans la fenêtre qui s'ouvre il suffit de coller le code dans la zone “Classe css de l'image”, comme sur cet exemple.
Validez, enregistrez la page et c'est fait, l'effet est présent sur l'image
Voici, ci-dessous des exemples d'effets sur images
Passez votre souris sur les images pour voir l'effet. Si vous voulez le reproduire vous pouvez récupérer le code correspondant.
Grayscale
code : photo-grayscale
Sepia
code : photo-sepia
Blur / Flou
code : photo-blur
Couleur plus opaque
code : photo-opacity-color
Saturation
code : photo-saturate
Hue Rotate
code : photo-hue-rotate
Inversion
code : photo-invert
Opacité
code : photo-opacity
Brightness
code : photo-brightness
Contraste
code : photo-contrast
Zoom
code : photo-zoom
Rotation
code : photo-rotate
Dézoomer
code : photo-zoom-out
Zoom out
code : photo-rounded
Déplacement
code : slide
Rotation et dézoom
code : photo-rotate-zoom-out
Morphisme
code : photo-morph
Dropshadow
code : photo-drop-shadow
