$ 14.00

Tuto Effets de hover avancés sur des images avec CSS

$ 14.00

  • Une formation vidéo de 1h45m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 4,9/5 sur 5 905 tutoriels vendus. Voir les autres formations de Sébastien Imbert

4,9
note moyenne

12
avis laissés
5 étoiles
11
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-7127-4224 laissé le 02/03/2019
    Comme tjs fan des tutos de sébastien sont toujours interessants, et super bien expliquer. Surtout avec tous les liens et astuces donnés en plus qui ne sont pas négligeables. Vraiment merci j'ai appliqué vos conseils et j'ai bien compris chaque hover c'est top !!

  • 4
    avis de membre-3649-288 laissé le 22/02/2019
    Tuto très intéressant, la logique de construction des effets est facile à suivre, cependant cela mériterait un peux plus de pédagogie notament sur les corrélations informatique, c'est à dire plus approfondi.

  • 5
    avis de komarianne laissé le 04/12/2018
    Excellent comme tous les tutos de ce formateur.

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1133 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données