CSS3 Fading List Style - Snippet

CSS3 Fading List Style

Nice fading list / accordion created using hover transitions. The markup is a simple unordered list where list elements are used as the trigger to show the hidden div that contains the hidden information. The fading transition is achieved by using the transition property and transitioning between 0 opacity to 1 opacity.

To make this effect work in CSS-only, we have to define a height of the hidden div which makes it incovenient to add different informations to different list elements. Adding a auto height will not let the div to animate, so there’s no choice here rather than having a fixed height for the div. However, this technique can be made useful by using a little JS or jQuery. Have a look at the source code.

Download CSS3 Fading List Style Code Fullscreen Tutor Play Walkthrough

Leave a Reply

Your email address will not be published. Required fields are marked *