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

 

 

Cette explication vous a-t-elle été utile ?
Oui   Non