CSS Click Event?!

CSS3 added support to let you know if a radio or a checkbox input elements are checked, using this capability I have created the 3D Flipping Cards in this protip I will show you how it is done.

How to make Select Event in CSS.

Using the new pseudo class :checked we can make advanced features that let "CSS remember", this new capability creates a better connection between the CSS and the HTML.

Let's Begin!

I have decided to make 4 cards that are showing there back side, and by clicking on them, they show there front and same by clicking again.

HTML

I created a list of items and added checkbox input and label to each li element:

<ul class="flipping-cards">
  <li>
    <input type="checkbox" id="item1">
    <label for="item1">
      <span class="wrapper">
        <span class="image"></span>
        <span class="back"></span> 
      </span>
    </label>    
  </li>
/*....(3 more with different ID and different reference from attribute For of the label)*/

** CSS **

I have added styles that show the backface of the card and hide the front:

input[type="checkbox"]{position:absolute;z-index:5;}
ul,li{list-style:none;padding:0;margin:0;}

.flipping-cards li{
  position:relative;
  float:left;
  margin-right:10px;
}
.flipping-cards label{  
  display:block;
  width:200px;
  height:250px;
  cursor:pointer;
}

.flipping-cards .wrapper{
  display:block;
  width:200px;
  height:250px;  
}
.flipping-cards .wrapper span{
  display:block;
  width:200px;
  height:250px;
  position:absolute;
  top:0;
  left:0;
}

.flipping-cards label .back{
  border-radius:10px;
  background-color:gray; 
}

.flipping-cards label .image{
  display:none;  
}

The result so far: see example

As you can see, by clicking on one of the card the checkbox get checked and unchecked if clicking again.

Now we add the front images of the cards, nothing will happen after we add them, because they are hidden with display:none.

CSS

label[for="item1"] .image{background-image:url(http://farm6.staticflickr.com/5339/8879221754_51e07afc5e_o.png);}

label[for="item2"] .image{background-image:url(http://farm8.staticflickr.com/7398/8878601839_e5a56dc65f_o.png);}

label[for="item3"] .image{background-image:url(http://farm6.staticflickr.com/5461/8879221878_b22fdf9ff8_o.png);}

label[for="item4"] .image{background-image:url(http://farm8.staticflickr.com/7458/8878601681_b8c0499874_o.png);}

The result so far: see example

Like I said, nothing happened. Now we just need to add the logic.

Add CSS logic

This CSS is checking if input is checked, then if true it's goes to is sibling label and find inside him the element with class="image", and then add styles to show the image and put it in front over the backface element (the back and front are sibling element).

Beside this I will hide the checkbox's as we don't need to display them anymore.

.flipping-cards input[type="checkbox"]:checked + label .image{
  display:block;
  position:absolute;
  right:0;
  left:0;
  z-index:2;
} 

input[type="checkbox"]{/*added*/display:none;}

That's it! We have flipping card, The final result example available here: see example

Yeay! Working good... but still little dry, I have added more style's for this example that make it a lot little more pretty with 3D CSS (transition and transform) and some gradient that I use from Lea Verou - CSS3 Patterns Gallery, she's really amazing and I suggest you to check out her blog.

Here is the full and final example - 3D Flipping Cards!.

Enjoy!

If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.

If liked this post, you may also like:
- CSS Target Event.

I got the inspiration by CSS3 Treeview. No JavaScript