Using CSS3 Transitions to Show/Hide Hidden Content

Showing and hiding content can be an elegant way to create interactions with a user and still maintain simple designs. This can be accomplished in a variety of ways however I’ve found that using the CSS3 transition property is the easiest approach and also allows for the smoothest animation on hover actions.

 Show/Hide Background Image

To start with something simple, let’s start with a partially hidden background that reveals more of the background when it’s hovered on. The html is pretty basic, just a couple of divs with some classes.

HTML:

The CSS requires the transition property on the class. The transition property will take in a the speed and the CSS property being altered as parameters. Lastly, the only other necessary step would be to create what the styles would be on hover.

CSS: 

Throw it all together and this is what you get!

Final Product:

Pros:

  • Easy to implement
  • Smooth Transition

Cons:

  • As it is, hidden content is limited to background image

Show/Hide Hidden Content

The above is great for galleries or quizzes. However we are going to need to add some extra aspects if we want to make our hidden information more complicated.

The new and improved HTML is similar to the one above however we have the addition of a hiddenLoad div which will contain all the html that will be hidden by default.

HTML:

We are going to build upon the CSS for our new hidden content by adding a transition on the display property of the hiddenLoad class. By default, we will have the display: hidden and when the main circle class is hovered (.circle:hover .hiddenLoad) we will have our transition go from display: hidden to display: block. The rest of the css are mainly for style purposes.

CSS:

Wrap it all together now and violá!

Results:

 

Pros:

  • Easy to implement
  • Smooth Transition
  • Hidden Content isn’t as limited

Cons:

  • More to set up

And the possibilities are endless from there!

8 thoughts on “Using CSS3 Transitions to Show/Hide Hidden Content

  1. I needed to post you that little observation to be able to say thanks a lot yet again for your personal lovely suggestions you have shown above. It has been simply seriously generous of you to allow openly what exactly a lot of folks would have offered for an ebook to help with making some cash for their own end, most importantly considering the fact that you might well have tried it if you ever decided. These principles as well served to be a fantastic way to know that many people have a similar dream much like my personal own to understand many more with respect to this matter. I am sure there are a lot more enjoyable occasions in the future for folks who find out your blog post.

  2. Admiring the time and energy you put into your blog and in depth information you offer.
    It’s good to come across a blog every once in a while that isn’t
    the same unwanted rehashed material. Excellent read!
    I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  3. Heya just wanted to give you a brief heads up and let you know a few of
    the images aren’t loading correctly. I’m not sure why but I think its a linking
    issue. I’ve tried it in two different internet browsers and both show
    the same results.

    My web-site – remédios para emagrecer – iposts.net
    -

    1. Shoot, sorry about that. I did a little bit too much spring cleaning. Thanks for letting me know! Everything should be back up and running!

Comments are closed.