Effets de hover avancés sur des images
ERROR
00:00
00:00

TUTO Effets de hover avancés sur des images

Sébastien Imbert
14,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Structure HTML et CSS
Chapitre 2
Premier effet de hover
Chapitre 3
Deuxième effet de hover
Chapitre 4
Troisième effet de hover
Chapitre 5
Quatrième effet de hover
Chapitre 6
Cinquième effet de hover
Chapitre 7
Conclusion

Plan détaillé du cours

Chapitre 1 : Structure HTML et CSS
17m25s
 
Leçon 1Structure HTML et CSS 1/2
Leçon 2Structure HTML et CSS 2/2
Chapitre 2 : Premier effet de hover
16m41s
 
Leçon 1Animation de l'image
Leçon 2Animation du texte et de la bordure
Chapitre 3 : Deuxième effet de hover
19m56s
 
Leçon 1Animation de l'image et du texte
Leçon 2Animation des bordures
Chapitre 4 : Troisième effet de hover
17m40s
 
Leçon 1Animation de l'ombre portée
Leçon 2Animation de l'image et du texte
Chapitre 5 : Quatrième effet de hover
14m25s
 
Leçon 1Animation de l'image et du texte
Leçon 2Animation du reflet
Chapitre 6 : Cinquième effet de hover
14m20s
 
Leçon 1Animation sur l'image
Leçon 2Animation du texte
Chapitre 7 : Conclusion
05m08s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
195
Apprenants
16
Commentaires
5/5
Note moyenne
5/5
15
4/5
1
3/5
0
2/5
0
1/5
0
Cédric Marniquet
Cédric Marniquet
Publié le 14/09/2020
Tutoriel très bien expliqué et les effets sur les images sont au top ! Merci pour ce tutoriel enrichissant.
Greg Cadoux
Greg Cadoux
Publié le 17/03/2020
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 !!!
Teddy Marchand
Teddy Marchand
Publié le 20/07/2019
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 :).

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données