Effets de hover avancés sur des images
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Effets de hover avancés sur des images

Sébastien Imbert
13,99€
Acheter maintenant, payer plus tard. En savoir plus

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
17m25
 
Leçon 1Structure HTML et CSS 1/2
Leçon 2Structure HTML et CSS 2/2
Chapitre 2 : Premier effet de hover
16m41
 
Leçon 1Animation de l'image
Leçon 2Animation du texte et de la bordure
Chapitre 3 : Deuxième effet de hover
19m56
 
Leçon 1Animation de l'image et du texte
Leçon 2Animation des bordures
Chapitre 4 : Troisième effet de hover
17m40
 
Leçon 1Animation de l'ombre portée
Leçon 2Animation de l'image et du texte
Chapitre 5 : Quatrième effet de hover
14m25
 
Leçon 1Animation de l'image et du texte
Leçon 2Animation du reflet
Chapitre 6 : Cinquième effet de hover
14m20
 
Leçon 1Animation sur l'image
Leçon 2Animation du texte
Chapitre 7 : Conclusion
05m08
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
371
Apprenants
20
Commentaires
4,9/5
Note moyenne
5/5
17
4/5
3
3/5
0
2/5
0
1/5
0
Guillaume Duval
Guillaume Duval
Publié le 18/11/2024
tres bon et interressant
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 25/08/2024
Merci pour ces différents ateliers. Sur le dernier exercice, il me semble que la solution que tu donnes ne correspond pas à celle que tu fournies, mais j'ai quand même pu m'en sortir.
Aytcheré Dieudonné Dakpo
Aytcheré Dieudonné Dakpo
Publié le 02/08/2024
bonne explication, vous avez de la pédagogie pour transmettre votre savoir-faire !

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

Payer plus tard

Prix d'achat : 13,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1427 tutos gratuits

Notre politique de protection des données