
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 🚫 NO JavaScript Allowed : You cannot track "score" or "clicks" using JS variables. Pure CSS/HTML only : Use the :checked or :active states to track when an object has been "found." 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 :
Continue reading on Dev.to Webdev
Opens in a new tab



