Effets de hover avancés sur des images

Aujourd'hui, la présence d'images sur un site web est cruciale. On les utilise souvent pour agencer un portfolio, ou encore des catégories de services ou de produits.
Souvent cliquables, les images sont un très bon moyen d'inciter un utilisateur à poursuivre sa navigation sur un site web. Il est donc important de soigner l'effet de hover sur l'image.

Un effet de hover rapide, subtil et unique renforce l'expérience utilisateur.

C'est aussi une manière pour le webdesigner de s'exprimer en créant des animations en CSS.

Au cours de ce tuto vidéo, nous créerons 5 effets de hover avancés de A à Z, et pour cela nous verrons :

• comment créer une structure HTML et CSS responsive et sémantiquement correcte pour vos images cliquables
• les transformations CSS 2D et 3D : le translate, le rotate, le scale, et la perspective
• les positions absolute et relative
• les pseudos éléments :before et :after
• les délais de transitions : transition-delay en CSS

À la fin de ce tuto, vous serez en mesure de reproduire les effets de survol réalisés durant ce tutoriel, de les modifier, mais aussi avec un peu d'entrainement, de créer vos propres effets de hover.
Je suis bien sur disponible dans la section entraide pour répondre à vos questions. Des fichiers sources sont fournis avec le cours.