Pour un client il m’a fallu réaliser un hover sur des images, celles-ci passais de N&B à de la couleur. Cependant je ne pouvais pas le faire en CSS. J’ai donc trouvé ce plugin jQuery (Adipoli) qui permet de créer des effets de hover sur des images et qui est plutôt bien réussis.
Il permet, en quelques lignes de code JS d’ajouter un filtre pour nuancer votre image et ajouter une transition d’affichage originale.
Deux options principales permettent de définir le style de votre hover :
- startEffect : Pour l’effet sur l’image à la base (transparent, normal ou overlay)
- hoverEffect : Pour l’effet d’apparition de l’image au survol de cette dernière (16 effets disponibles !)
Vous pourrez aussi contrôler d’autres options comme l’opacité de l’image à la base, la vitesse de l’effet de hover, les nombre de carrés/colonnes pour les animations spécifiques…
Mise en place facile :
$('.imgHover').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});Au niveau de la compatibilité navigateur, j’ai testé sous IE8 et firefox 3.6 et cela fonctionne bien!
Pas mal hein ?