FreeCom création de site internet wordpress gers, Auch, Tarbes, Toulouse, gers Création de sites web, Agence de communication Web & Print, Freecom - AGENCE WEB FREE COM Création de site internet Vitrine et E commerce Wordpress. Free Com webmaster Auch, Gers et Occitanie - réferencement local et naturel - visibilité sur le web (SEO)

Ajouter des effets au survol de la souris sur une image

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

 

 

 

 

 

 

 

SOMMAIRE