🙅‍♂️

Desktop Experience Required

The Design Gym challenges are optimized for desktop screens to provide the best coding experience. Please access this page on a larger screen to start practicing!

Return to challenges

Back to challenges

Spoiler Reveal

easy

hover

opacity

transition

group

Description

Create a spoiler text that reveals its content when hovered. This is a common pattern used in forums and social media platforms to hide potential spoilers.

Starter Code

HTML


<div class="...">
  <div class="...">
    <span>Hover me to reveal</span>
  </div>
  <div class="...">
    <span>Spoiler revealed!</span>
  </div>
</div>

CSS

/* No additional CSS needed, we will use Tailwind classes */

Hints

Use the group class on the parent element to create a hover context
Use absolute positioning to overlay the spoiler content
Combine opacity-0 and group-hover:opacity-100 for the reveal effect
Add transition-opacity for smooth animation

Reference & Credit 🙏

Preview

Hover me to reveal

Spoiler revealed!