Opaque transition using active class

Question

I need help with CSS. I am trying to make it so a div's opacity is set to 1 when another div is clicked as a transitiion. I can only use CSS so I was trying to find out how I could use the active class to do this or any other method.

Code:

#reveal {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
#ss {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
  opacity: 1;
  transition: all 4s;
}

<div id="reveal"><b>Requirements:</b>
  <br>
  <li>Shinigami present approximately 130 years from the present.
  <li>Someone with some understanding of Quincy lore.
  <li>People willing to fight a Quincy stronger than them.
  <li>Shinigami who will remember this.
  <li>Willingness to potentially expand upon this in the present.</li>
  <br>
  
  <b>Optional Additions</b>
  <li>Hollow/Arrancar present approximately 130 years from the present.
  <li>Anything at someone else may want to do using this for themselves.</li>
  <br>
  <i>Click for a brief synopsis.</i>
</div>

<br>
<br>
<br>

<div id="ss"><b>Synopsis:</b>
  <br>
  <br>Lena Heinrich, the embodiment of destruction. She is an immensely powerful being and an undeniably substantial threat to the balance of the living world and spiritual world. Her relentless annihilation of countless Hollows has been known to us for some
  time. She is beyond reason and control at this point and must be eliminated to protect both worlds.
  <br>
  <br>Already Shinigami have fallen to her, she silences all that might dissuade her from her path of destruction. No longer can we ignore such a dire threat. We must establish a sortie with a number of powerful Shinigami to bring her down; she is not to
  be underestimated, few Quincy have existed as powerful as her…
  <br>
  <br>Interested? Post below and I'll sort things out ;)
</div>

cch · Accepted Answer · 2015-05-04T12:11:58.820

Using only CSS, you can use the :focus pseudo class. When you focus on a div, you can apply any CSS rules there. Also add to the divs a tabindex attribute.

See an example:

#reveal {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
#ss {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
div#reveal:focus, div#ss:focus {
  color: black ;
  transition: all 4s;
}

<div id="reveal" tabindex=1>
  <b>Requirements:</b>

  <li>Shinigami present approximately 130 years from the present.
  <li>Someone with some understanding of Quincy lore.
  <li>People willing to fight a Quincy stronger than them.
  <li>Shinigami who will remember this.
  <li>Willingness to potentially expand upon this in the present.</li>
  <br/>

  <b>Optional Additions</b>
  <li>Hollow/Arrancar present approximately 130 years from the present.
  <li>Anything at someone else may want to do using this for themselves.</li>
  <br>
  <i>Click for a brief synopsis.</i>
</div>

<div id="ss" tabindex=2><b>Synopsis:</b>
  <br>
  <br>Lena Heinrich, the embodiment of destruction. She is an immensely powerful being and an undeniably substantial threat to the balance of the living world and spiritual world. Her relentless annihilation of countless Hollows has been known to us for some
  time. She is beyond reason and control at this point and must be eliminated to protect both worlds.
  <br>
  <br>Already Shinigami have fallen to her, she silences all that might dissuade her from her path of destruction. No longer can we ignore such a dire threat. We must establish a sortie with a number of powerful Shinigami to bring her down; she is not to
  be underestimated, few Quincy have existed as powerful as her…
  <br>
  <br>Interested? Post below and I'll sort things out ;)
</div>

By the way your markup is not valid at all.

Appreciated. I know it's not valid but it's just for something that won't be edited or reused :p — Theo, May 04 '15 at 11:57
Bravo, +1. Note that the `!important` can be avoided [by using an higher specificity](http://stackoverflow.com/a/21728972/1654265) (though I guess you've used it for test purposes only) — Andrea Ligios, May 04 '15 at 12:01

score 1 · Answer 2 · answered May 04 '15 at 11:47

CSS isn't meant for handling click events, but there are some hacks using pseudo selectors/ elements that could meet your needs. Keep in mind that manipulating elements in this manner should be avoided. It would be extremely easy to achieve your goal using a few lines of jQuery, so I recommend that if you have the option. If not, the CSS :target hack might be helpful here.

Your HTML:

<a href="#alert">Click Me</a>
<div id="alert">
  <p>some alarming information here</p>
</div>

And your CSS:

#alert {
  display: none;
}

#alert:target {
  display: block;
}

The example above is a simple illustration using display:none. You could swap that out with opacity 0 to achieve a similar effect. If you'd like additional examples, the following link will walk you through more in depth examples - http://www.vanseodesign.com/css/click-events/

Thanks, that link will be pretty useful for the future too. – Theo May 04 '15 at 11:57 — Theo, May 04 '15 at 11:57

Opaque transition using active class

2 Answers2