Besoin d'un effet de survol cool pour quelque chose sur votre site? Cherchez pas plus loin! Nous avons créé plusieurs exemples personnalisés que vous pouvez visualiser en direct pour vous inspirer.
Si vous aimez l'effet, volez-le! Nous avons le CSS prêt et attend que vous copiez.
Donnez vie à votre site ennuyeux
Les effets de survol peuvent donner l'impression que votre site est beaucoup plus dynamique et vivant. Auparavant, JavaScript était requis pour faire quelque chose de vraiment intéressant avec un effet de survol, mais de nos jours, CSS3 est capable de faire une tonne de choses vraiment intéressantes si vous en créez suffisamment.
Les effets que nous allons utiliser aujourd'hui utilisent tous du code pris en charge par les navigateurs modernes, ce qui signifie bien entendu Mozilla et Webkit pour la plupart. La prise en charge d'Internet Explorer est au mieux inégale selon les versions. Veillez donc à bien tester votre propre implémentation. Les effets de survol fantaisie sont l’une de ces choses que vous pouvez généralement dégrader assez gracieusement afin que les navigateurs plus anciens voient encore des changements.
Bump Up
Démo en direct: Cliquez ici pour lancer
Cela fonctionne mieux lorsque vous avez une série d'éléments horizontaux. Ainsi, lorsque vous passez votre souris dessus, vous obtenez un bel effet de vague.
Celui-ci est super facile à mettre en œuvre et il existe en fait plusieurs façons de s'y prendre. Ce que j'ai fait ci-dessous consiste simplement à appliquer une marge à chaque image, puis à réduire cette marge en survol. La marge commence à 15 pixels, puis réduit à seulement 2 pixels en survol, ce qui fait sauter l'image. Vous pouvez facilement utiliser le même effet sur les éléments de texte s'ils figurent dans une liste.
La transition ici est complètement facultative car l’effet fonctionne toujours très bien sans cela. Juste pour que ce soit un peu plus fluide, j’ai jeté une rapide série d’animations d’atténuation, ce qui, à mon avis, a fourni le meilleur effet pour ce sujet particulier.
Bump Up CSS
Stack & Grow
Démo en direct: Cliquez ici pour lancer
Pour celui-ci, je voulais une sorte d’effet lampe à lave de sorte que lorsque vous déplacez votre souris vers le bas de la liste, chaque image s’agrandisse lentement, puis revient à sa taille originale.
Pour ce faire, j'ai inséré une pile d'images de 400 pixels de large par 133 pixels de haut. J'ai ensuite dimensionné ces images à 300px par 100px dans le CSS et développé en vol stationnaire. Étant donné que j'avais un alignement au centre, la nouvelle taille de l'image a jeté mon alignement, une marge négative définie à la moitié de la croissance en largeur a résolu ce problème.
Stack & Grow CSS
Fade Text in
Démo en direct: Cliquez ici pour lancer
Pour celui-ci, je voulais créer un événement de type JavaScript dans lequel vous pouvez survoler un élément et voir un effet sur un autre. Ce que j'ai fait pour y parvenir est de jeter du texte et une image dans une div, puis de laisser tout ce qu'il y a à flotteur pour que le texte soit aligné sur l'image. Ensuite, j'ai appliqué couleur: transparent et hauteur de ligne: 0px au div. Cela place le texte en haut de la div et le cache.
Pour que le texte apparaisse en survol, j'ai simplement changé la couleur et la hauteur de ligne. Lorsque vous survolez l'image, le texte est zoomé! C'est un truc plutôt bien vu que tout est en CSS.
Fade Text In CSS
Photo tordue
Démo en direct: Cliquez ici pour lancer
Celui-ci est super simple mais c'est un très bon effet pour une galerie de vignettes. Le principe de base est de créer une grille d'images, puis de les faire pivoter lorsque vous les survolez, créant ainsi l'illusion d'une photo tordue suspendue à un mur.
Nous allons utiliser beaucoup de CSS plus récents, spécifiques au navigateur, de sorte que vous voudrez peut-être ajouter quelque chose pour les navigateurs plus anciens. Notre galerie utilisera des boîtes-ombres (en option), des transitions et des transformations pour obtenir l’effet souhaité. La transformation gérera la rotation et la transition la rendra belle et lisse.
Pour aller encore plus loin, vous pouvez utiliser des pseudo-sélecteurs pour que les images soient maigres dans des directions différentes.
Photo tordue CSS
Fade In et Reflect
Démo en direct: Cliquez ici pour lancer
Celui-ci est assez compliqué, j'ai donc dû lutter un peu avant de créer un effet qui me plaisait. L'état par défaut de l'image est à une opacité légèrement réduite.Ensuite, lorsque vous la survolez, l'opacité tourne à plein, une lueur apparaît sur les bords et un reflet (Webkit uniquement) apparaît.
Malheureusement, la réflexion n’est pas une réponse à une transition, elle apparaît donc tout de suite, tandis que le reste s’installe, mais c’est quand même une belle transition.
Si vous ne savez pas comment fonctionnent les réflexions CSS, vous pouvez lire toutes ces informations dans un excellent article de David Walsh.
Fade In et Reflect CSS
Conclusion
Ces cinq exemples devraient suffire à vous inciter à créer vos propres superbes effets de survol CSS. N'oubliez pas de les expérimenter, de les combiner et d'ajouter ton propre style pour les rendre plus intéressants.
Si vous avez remarqué des effets de survol intéressants sur le Web, nous voulons les voir! Laissez un commentaire ci-dessous et un lien vers une page avec un exemple.