Pure CSS Toggle :active&:hover

I thought i'd share a useful trick with CSS that allows for toggle functionality without having to use a check box. I had a lot of trouble implementing the check box toggle method in all the posts on a site, especially if there are images that need to take up the screen temporarily and be closed easily without confusion.

• The check box toggle method is also known as the check box 'hack'
• Demo with photos: toggle demo
• CSS I used in a pastebin: code

A really quick rundown. :active allows for an element with :hover to be brought to the screen, keeping it self open with it's own :hover. To close it, :active is used to move it away from your mouse or stop the :hover allowing it to toggle off.

How it works in more detail

1. I use a transparent <div> class named 'hook' that is always hidden with no width or height until I call for it, it's use is explained in the follow steps.

2. This <div> is given a :hover property that makes itself stay open. (When it's opened, it stays open! It's a hook..)

3. Using the CSS :active selector allows for the click to be captured and force our hidden child <div> to become enlarged over the entire screen with position: fixed. Now that it's open it stays open on it's own.

4. Now you've released the mouse and :active is no longer keeping our <div> in position, but we made it 'hook' on so it doesn't need a click anymore.

5. The last step is to make the 'hook' unhook, simply add the :active selector to our 'hook' class that closes it self. I used visibility: hidden; and left: -9999; to stop it from staying in place. This part can be changed with a any CSS that does the same job of stopping the hook.

The HTML I used

<div class = "gallery-post">
          <div class = "hook"></div>
          <img src="image.jpg">
     <h1>Scarcely on striking</h1>
</div>

Placing the hook in all my posts allowed me to change the image directly after it with the selector ~

This is how I did it, i'm sure there are a few changes that could be made to my code but I think you get the idea.