$ 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é
  • 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é 14 tutoriels et obtenu une note moyenne de 4,9/5 sur 1 028 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

6
avis laissés
5 étoiles
6
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de maxidevis laissé le 25/10/2017
    J'ai appris beaucoup de choses. Excellent plutôt. Le rythme est peut-être un petit peu trop rapide, mais on peut visionner les vidéos plusieurs fois.

  • 5
    avis de astridc laissé le 30/06/2017
    Super tuto ! Bravo. Un professeur ultra pédagogique. Un bonheur d'apprendre le css avec lui ! Je suis impatiente de découvrir le prochain

  • 5
    avis de membre-8048-817 laissé le 21/05/2017
    Excellent tuto, très complet et très éducatif. Agréable à écouter et facile à suivre.

  • 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 1590 tuto gratuits


non, je ne veux pas me former gratuitement