10 bibliothèques CSS pour de meilleurs effets de survol d'images

Laisser les utilisateurs savoir facilement et clairement quelle partie de la page Web est cliquable est une partie importante de la conception UX. La manière la plus ancienne mais la plus efficace de le faire était de changer la couleur du texte et de le souligner. De nos jours, avec CSS, il y a beaucoup plus de façons de créer des effets de survol, en particulier pour les images..

Les développeurs peuvent maintenant ajouter des effets de transition ou une animation lorsqu'un événement survolant est déclenché. Nous examinons les diapositives directionnelles, les zooms à différentes vitesses, les fondus enchaînés, les effets de charnière, les révélations de projecteurs, les oscillations, les rebonds, etc..

Dans cette compilation, il y a plus de 250 effets de survol pour vous inspirer. Vous pouvez également récupérer le code à la source.

Effets de survol de l'image (16 effets)

Dans cette page, vous trouverez une belle collection de 16 effets d’images survolées avec des légendes. Saisissez le code HTML et CSS pour chaque effet en survolant les images, puis en cliquant sur Afficher le code.

Légende de l'image Hover Animation (4 effets)

Voici 4 animations de sous-titres sympas qui s’exécutent au survol de l’image. Les effets sont construits avec des transitions CSS3 pures et une transformation, sans JavaScript, pour augmenter la compatibilité entre les navigateurs..

iHover (35 effets)

iHover est une collection d'effets de survol optimisés par CSS3. Il y a 20 effets de survol du cercle et 15 effets du survol du carré. Pour utiliser les effets, vous devez écrire du balisage HTML et inclure les fichiers CSS..

Survolez l'image (44 effets)

Cette bibliothèque contient 44 effets créés avec du CSS pur. Certains effets incluent des fondus, des poussées, des diapositives, des charnières, des révélations, des zooms, des flous, des retournements, des plis et des volets, dans plusieurs directions. Il existe une version étendue de 216 effets pouvant être achetée au prix de 14 €..

Idées Effet Survol (30 effets)

Cette démo en survol d’image réalisée par Codrop vous inspire lors de la transition en douceur des images et de leurs sous-titres. Il y a un total de 30 effets sur deux jeux avec des tutoriels et le code source.

Survolez CSS (108 effets)

Hover CSS vous permet d'ajouter des effets de survol à n'importe quel élément, tel qu'un bouton, un lien ou une image. Les effets incluent les transitions 2D, les transitions d’arrière-plan, les transitions de bordures, d’ombres et de lueur, etc. La bibliothèque est disponible en CSS, Sass et LESS.

Animatisme (100+ effets)

Il y a plus de 100 animations de survol d'images avec des boutons, des superpositions, des détails, des légendes, des images et des boutons de médias sociaux. Tous les effets sont propulsés par CSS3.

Légende Hover Effect (7 effets)

Il y a 7 effets différents dans cette collection. Toutes les transitions ont l'air vraiment bien et lisse. Accédez à la section du didacticiel pour savoir comment appliquer ces effets à votre projet..

Effets de survol de l'image CSS (15 effets)

Collection d'effets de survol simples tels que zoom, diapositive, rotation, niveaux de gris, flou, opacité et autres effets de base. Vous pouvez utiliser ces effets en ajoutant la classe CSS avant votre figure étiquette.

Effet de survol 3D sensible à la direction

C'est un effet de survol super cool qui détectera votre dernier mouvement de souris. Les sous-titres s’ouvriront dans l’une des quatre directions en fonction de la dernière position du curseur..

Animation en survol

Voici une animation de survol de frontière inspirée d’UNIQLO. Lors d'un survol, la bordure de l'image s'anime.

Tuiles avec survol animé

Un pour les motifs de mosaïque, celui-ci comprend un zoom lent, des diapositives, des pop-ins, un fond grisé, entre autres.

SVG clip-Path Hover Effect

Un effet de survol de l'image des rayons X super impressionnant propulsé par SVG clip-path et les transitions CSS. Fonctionne bien sur Chrome, Opera et Safari.