CSS Click to Reveal Effect - Animation Idea #8

  • 31 January 2022
  • 0 replies
  • 197 views

Userlevel 7
Badge +5

In this example, I wanted to start developing some more interactivity as opposed to passive effects.

This requires the user to click on the box. When you click on it, the background color changes so that the text can be read. Of course, the trick here is to start with a background color that matches the text color so that it blends in and cannot be read.

CSS Click to Reveal Effect

Here is the CSS to make the above.

/* Click to Reveal */
/* This is the CSS for the Branding and Look section */

#card {
width: 250px;
height: 175px;
background-color: #00ff00;
margin: 25px;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
font-size: 24px;
color: #00ff00;
}

#card:active {
background-color: #000000;
}

Here is the HTML for the widget.

<!-- Here is the HTML for your widget -->

<div id="card">
This is the revealed text when you click on the box.
</div>

 

I would love to hear some ways that you could use this in your learning spaces.


0 replies

Be the first to reply!

Reply