Show content on mouseover using CSS

With powerful features of CSS we can show content on mouseover using CSS and we don’t need javascript. Here I have provided two examples, first example contains no transition and second example has CSS transition effect while hovering. You can see these examples in demo here.

Here I am writing the quick idea behind this. The simple html is:

Here we has used container class as fixed height div to maintain position of other content because hovering may force them to slightly shift from their position.

And CSS to show hidden content  without transition:

Or CSS to apply transition to show content on mouseover:

You can apply any style you wish in this way. The only thing to keep in mind is that the element you wish to affect is a child (or immediate sibling with the + selector) of the element you are hovering.