Salut,
C'est toujours sympa de partager un peu de son savoir-faire et faire un tuto sur YouTube est un bon moyen.
J'ai bien suivi ton tuto et pour que ton code soit nickel et exemplaire (certaines personnes vont faire comme toi...) il faudrait peut-être corriger 2-3 trucs.
Dans ton code HTML :
- dans les attributs "width" et "height" de tes balises <img> il ne faut pas mettre l'unité en HTML5, c'est invalide au niveau du W3C. Il faut donc supprimer "px"
- l'attribut "alt" n'est pas seulement là pour avoir un code valide mais est utile pour les personnes qui utilisent des lecteurs d'écran et si le lien de l'image est brisé ou que l'image ne peut pas se charger, il ne faut donc pas hésiter à fournir une description courte de l'image
Du côté du CSS :
- imagine que ton visiteur n'a pas la font "Trebuchet MS" installée sur son ordinateur, que se passe-t-il ? Il faut TOUJOURS indiquer des fonts alternatives et fournir en dernier recours une famille de font (serif, sans-serif, script...). Pour cela ta propriété devrait ressembler à ça :
font-family : "Trebuchet MS", "Arial", sans-serif;
- ça serait préférable de déclarer ton text-align: center; sur le span, on est plus près des éléments à styler
- tu appliques une opacité de 0.8 à ton <span> mais du coup ton texte est également transparent et ça, c'est pas top... Si un jour je veux une opacité de 0.3 car je veux un masquage plus léger, je ne verrais plus mon texte. Pour cela, il faudrait que tu appliques un fond transparent et non une opacité sur l'ensemble du <span> :
background-color : rgba(0,0,0,0.8);
/*suppression de opacity: 0.8;*/
- la répétition des dimensions sur ton <span> est inutile : tu le déclares en display: block; donc forcément 100% de la largeur du parent et ensuite il faut juste un height: 100%; comme ça tu ne modifies pas 2 valeurs à chaque modification
- la transition est inutile sur le :hover, tu peux le supprimer, elle est déjà sur le <span> donc ça suffit
Pour finir, je n'ai pas l'explication exacte du fait que si tu ne déclares pas la position: relative; sur le <span> le texte passe au-dessus de l'image et le background en-dessous mais c'est sûrement une histoire de z-index.
Une version avec les modifs à effectuer.
Bonjour tout le monde, nouveau tutoriel HTML & CSS destiné aux débutants particulièrement pour faire un effet lors d'un hover comme celui-ci :
