9,00

Tuto Objectif Frontend. Comment faire apparaître facilement des infos sur une image avec CSS, HTML

9,00

  • Une formation vidéo de 24m19s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Objectif Frontend. Comment faire apparaître facilement des infos sur une image

ajouter ce cours aux favoris retirer ce cours des favoris

Dans ce cours en ligne, je vous propose d'apprendre comment faire apparaître des informations sur une image, au moment de son survol par la souris de l'utilisateur.

Cet effet, connu sous le nom d'overlay permettra d'ajouter une couche d'informations et améliorera l'expérience utilisateur.
L'apparition de cet effet se fera tout en douceur, grâce à une transition.
Au moment du passage de la souris sur l'image (événement hover), un calque noir contenant un texte, apparaîtra avec une transition horizontale de la gauche vers la droite. Ce calque noir aura un réglage d'opacité, pour le rendre plus ou moins transparent, mais surtout améliorer la lisibilité notre texte, quelle que soit l'image utilisée.
Cela améliorera l'accessibilité de notre effet.

Pour réaliser cet atelier front end, allons mobiliser une partie de nos connaissances en langage CSS ainsi que du HTML

Je mets les codes de ce tuto à votre disposition.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.

Bon tuto !

Table des matières de cette formation CSS, HTML (durée : 24m19s)

    • Mise en place du code HTML 00:05:00
    • Mise en forme des sections 00:09:26
    • Faire apparaitre les infos sur l'image 00:09:53



Formateur : Carl Brison

Carl Brison a publié 273 tutoriels et obtenu une note moyenne de 4,9/5 sur 17 368 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    HTML 5, CSS 3
  • Que contient le fichier source ?
    Le code source de ce tutoriel.
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1432 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données