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
Effets de hover avancés sur des images

ajouter ce cours aux favoris retirer ce cours des favoris

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 8 962 tutoriels vendus. Voir les autres formations de Sébastien Imbert

4,9
note moyenne

16
avis laissés
5 étoiles
15
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-4158-6876 laissé le 14/09/2020
    Tutoriel très bien expliqué et les effets sur les images sont au top ! Merci pour ce tutoriel enrichissant.

  • 5
    avis de shrek74 laissé 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 !!!

  • 5
    avis de tedm laissé 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 :).

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


non, je ne veux pas me former gratuitement

voir notre politique de protection des données