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.
Table des matières de cette formation CSS (durée : 1h45m)
-
Structure HTML et CSS
- Structure HTML et CSS 1/2 00:07:32
- Structure HTML et CSS 2/2 00:09:53
-
Premier effet de hover
- Animation de l'image 00:08:50
- Animation du texte et de la bordure 00:07:51
-
Deuxième effet de hover
- Animation de l'image et du texte 00:10:13
- Animation des bordures 00:09:43
-
Troisième effet de hover
- Animation de l'ombre portée 00:08:18
- Animation de l'image et du texte 00:09:22
-
Quatrième effet de hover
- Animation de l'image et du texte 00:07:23
- Animation du reflet 00:07:02
-
Cinquième effet de hover
- Animation sur l'image 00:04:58
- Animation du texte 00:09:22
-
Conclusion
- Conclusion 00:05:08
- Fichiers sourcestélécharger
- Certificat
Formateur : Sébastien Imbert
-
Tutoriel très bien expliqué et les effets sur les images sont au top ! Merci pour ce tutoriel enrichissant.
-
Comme d'habitude, Sébastien, tes tuto sont vraiment très bien réalisés et tu expliques clairement les choses. Je te remercie encore et à bientôt !!!
-
Excellent tuto sur les effets Hover. Les 5 cas abordés dans ce tuto nous permettent d'avoir un bon panel de ce qu'on peut faire avec le hover, transform, transition, etc. . L'utilisation du navigateur en preview avant d'entrer son code css est, je trouve, une excellente méthode de travail. Merci Sébastien :).
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés