Daily Challenge #8 : The "CSS Scavenger Hunt" 🕵️‍♂️

It is February 20th. Today, we are turning a webpage into a game. Your mission is to hide "treasures" inside a busy scene and make them findable without a single line of script.

The Mission

Build a "Hidden Object" scene. A user must find and click (or hover) on 3 specific hidden items to reveal a "Victory" message.

The Rules 🚫

1. NO JavaScript Allowed : You cannot track "score" or "clicks" using JS variables.
2. Pure CSS/HTML only : Use the :checked or :active states to track when an object has been "found."
3. Visual Mystery : The objects should be camouflaged using CSS properties like opacity, filter, or clever positioning behind other elements.

The Goal 🏆

When all hidden objects are found, a final "You Win!" overlay should appear.

Pro Tip : You can use the ~ (general sibling selector) to check if multiple checkboxes are checked at once: input:checked ~ input:checked ~ input:checked ~ .victory { display: block; }

---

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If you use CSS cursor: url(...) to turn the mouse into a magnifying glass.
• Extra Credit : If the objects move or animate, making them harder to catch!

Have fun!