Toggle content using pure CSS

While browsing through internet for websites with flat UI, I came across this concept. In this blog I am going to explain you how easy it is to achieve such a nice effect of toggling content of div.

I see two advantages with this approach:

  1. We can accomodate more content in less space.
  2. Better user experience, no change in content area size.

Below screen shots is what we are going to achieve at the end of this article:

Front ( all three boxes ):

Back (first box):

HTML part:

Idea here is to show some hidden content (back) on hover of div (wrapper) and hide (front)

HTML content is self explanatory. Two divs with class ‘.front’ and ‘.back’ are chirdren of ‘.wrapper’ div

CSS part:

on hover of ‘.wrapper’ we are showing ‘.back’ div

and hiding ‘.front’ div.

Below is the working example and  you can find complete code there.