Animer votre site WordPress

par | 5 janvier 2017

Agrandir une image lors de son survol par le curseur de la souris (hover effect).

 

fleche001Tablet haute qualité

Procédure de mise en place

  • Insérer une image à l’emplacement désiré.
  • Attribuer une classe (class = iis_img_hover) à l’image pour laquelle vous désirez appliquer cet effet visuel.
  • Ajouter le code CSS ci-dessous dans la feuille de style de votre thème enfant (style.css) ou dans la zone de personnalisation CSS de votre thème si vous n’utilisez pas de thème enfant.
  • Tester le bon fonctionnement des modifications.

Code CSS utilisé :

/* L’image grandit lors de son survol  */

.iis_img_hover {

  border : none !important ;

  -webkit-transition : all 0.6s ease ;

  -moz-transition : all 0.6s ease ;

  -o-transition : all 0.6s ease ;

  transition : all 0.6s ease ;

}

.iis_img_hover:hover {

  box-shadow : 2px 1px 18px #284242 ;

  border-radius : 4px ;

  -webkit-transform : scale(1.10) ;

  -moz-transform : scale(1.10) ;

  -ms-transform : scale(1.10) ;

  -o-transform : scale(1.10) ;

  transform : scale(1.10) ;

}

Ajouter la classe CSS à l’image :

Méthode de base :

Utiliser l’éditeur d’image de WordPress et ajouter la classe CSS dans le champ prévu à cet effet.

CSS class to image

En fonction du thème utilisé sous WordPress, il est possible d’ajouter cette classe d’une manière différente.

Remarques :

Le code CSS présenté ici ajoute également un effet d’ombre lors du survol par le curseur de la souris.

Les paramètres du code CSS peuvent être adaptés en fonction des besoins, par exemple, le paramètre de transition « ease » peut être remplacé par [linear, ease-in, ease-out ou ease-in-out]. La durée de transition, 0.6 seconde dans notre exemple, peut être augmentée ou diminuée selon l’effet voulu. Pour plus d’information à propos du code CSS, il est possible de consulter la page de l’excellent site w3schools.com : CSS3 transition Property Lien externe

@+

Localisation de nos services informatiques.

inoxIT Services
Chemin des Oiseaux 3
1267 Vich