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

Source: Dev.to

Overview

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.

Goal

Create a “Hidden Object” scene where a user must find and click (or hover) on three specific hidden items to reveal a “Victory” message.

Constraints

• No JavaScript allowed – you cannot track score or clicks with JS variables.
• Use pure CSS/HTML only – rely on :checked or :active states to track when an object has been “found.”
• The objects should be camouflaged using CSS properties such as opacity, filter, or clever positioning behind other elements.

Victory Overlay

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

/* Example of using the general sibling selector */
input:checked ~ input:checked ~ input:checked ~ .victory {
    display: block;
}

Tips

• Pro tip: The ~ (general sibling selector) can check if multiple checkboxes are checked at once, as shown above.
• Bonus: Use cursor: url(...), auto; to turn the mouse into a magnifying glass.
• Extra credit: Animate or move the objects to make them harder to catch.

Submission

Drop your CodePen or GitHub repository link in the comments!

Have fun!