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

TUTO Effets de hover avancés sur des images

Sébastien Imbert
14,00€
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
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
197
Apprenants
17
Commentaires
5/5
Note moyenne
5/5
16
4/5
1
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 08/04/2024
Bonjour - Beaucoup de nouvelles connaissances dans ce tuto à effets de hover. Je l'avoue j'ai été un peu larguée par moment avec les translate, transforme et perspective mais ça nous montre les nombreuses possibilités qui s'offrent à nous. Le CSS est riche et nous n'avons pas toute la connaissance. Par contre je ne sais pas de quelle année est ce cours mais en 2024, je ne pense pas que les préfixes pour les navigateurs soient encore utilies. En plus ça alourdit beaucoup le code. Les gens n'ont qu'à mettre à jour leurs navigateurs ;-) Merci pour vos nombreuses explications et j'apprécie que vous ayez mis les liens de sites utilisés, c'est sympa. Un petit plus non négligeable.
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 !!!

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 : 14,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 1357 tutos gratuits

Notre politique de protection des données