Z-index - Mains de Monstres

Pour cet exercice, vous devez recréer une scène où des monstres jouent au jeu d’enfants d’empilement des mains.

Aperçu du résultat 👇

Matériel

Couleurs 🎨

Beige #f4e2d8
Rouge #ba5370

Médias 🖼️

Freddy Krueger
https://ex.smnarnold.com/z-index/mains-de-montres/freddy-krueger.webp
Nosferatu
https://ex.smnarnold.com/z-index/mains-de-montres/nosferatu.webp
Créature du Lac
https://ex.smnarnold.com/z-index/mains-de-montres/creature-from-the-black-lagoon.webp
La momie
https://ex.smnarnold.com/z-index/mains-de-montres/the-mummy.webp

Aucun Pen ne vous est fourni pour cet exercice. Vous devrez vous en créer un sur CodePen et écrire l'ensemble du HTML et du CSS.

Requis

  1. Créez un dégradé de beige à rouge 🔴 couvrant l'ensemble de l'arrière-plan de votre page HTML.

  2. Créez ensuite un élément HTML de 600x600px qui contiendra toutes les mains des monstres.

  3. Affichez dans le code HTML de cet élément les mains dans cet ordre précis:

  4. Toutes les images de mains ont la même taille, superposez-les en CSS. Leur ordre d'apparition devrait être différent en ce moment de celui sur l'aperçu du résultat ci-dessus ☝️

  5. En l'aide du CSS seulement, changer l'ordre d'empilement des mains, de sorte que celle de Nosferatu soit sur le dessus, suivi de celle de la momie, de Freddy et finalement de la créature.

Notes de cours 📚