Creating a Simple Spoiler Reveal Effect with CSS Hover

Journal Entry 1 /April 2 2025.

Introduction

Today, I tried a new CSS syntax—background: initial; color: initial;—to create a hover effect that reveals spoilers hidden inside a paragraph. This small experiment helped me understand how CSS resets styles to their default values.

Understanding the Code

The HTML Structure

The HTML consists of several <div> elements containing <p> paragraphs. Inside each paragraph, there's a <span> with the class .spoiler-line, which holds the actual spoiler text.

htmlCopyEdit<p class="planets">In the 1968 film *Planet of the Apes*, they find  
    <span class="spoiler-line">the ruins of the Statue of Liberty. The Planet of the Apes is Earth!</span>
</p>

Each <span> inside the <p> is styled to be hidden by default, appearing only when the user hovers over it.

---

The CSS Styling

Basic Styling

I set a black background for the .spoiler-line spans so that the text remains hidden. This makes it blend into the background, effectively "hiding" the spoiler.

cssCopyEdit.spoiler-line {
  background-color: black;
}

---

The Hover Effect (New Syntax!)

When the user hovers over the spoiler text, I used this CSS rule:

cssCopyEdit.spoiler-line:hover {
  background: initial;
  color: initial;
}

What Does This Do?

• background: initial; → Resets the background to its default value (which is usually transparent).

• color: initial; → Resets the text color to its default value (which is usually black).

Result

Before hover:
![Black text hidden]

On hover:
The background disappears, and the text returns to its normal color, revealing the spoiler! 🎉

---

What I Learned

• The initial value resets CSS properties to their default state.

• :hover can be used to create interactive effects without JavaScript.

• Small experiments like this help me understand CSS better!