CSS3 Tricks: Jumping Featured Boxes

In today’s tutorial we will create a set of featured boxes that will create a nice text flying effect when you move your mouse over them. We will take advantage of the CSS3 custom animations and create a set of our own animations. I recommend that you download the source files first and check the live demo. Simply move your mose over the featured boxes to see the effect.

LIVE DEMO

[download id=”166″]

THE MARKUP

We will define four boxes that will use the same structure. Each box consists of an image, title and some description text. All the boxes are put inside one container. Syntax for one box is as follows:

The syntax for other three boxes is the same and all you need to do is copy the code three more times.

CSS

We will first define CSS for the whole container:

In next we need to design our containers. We will take advantage of CSS3 and create boxes with a nice subtle gradient. We will add a shadow effect at the bottom to make it look more realistic. Add the following code:

Do not forget to use the parameter overflow:hidden otherwise you will see elements flying from the top or from the bottom (they will not be hidden by the main box). You can create your own gradients. I usually use a CSS3 Gradient Generator that will help you create css3 gradients in seconds. Note that we added webkit transitions at the end. This tells CSS to animate the background parameter (we will use the animation on hover). We will now add a simple background color change transition for the whole box (separate transitions will be added later). Add the following code:

SETTING UP THE ANIMATION

We will now add the animation to the image in the box. First we need to define the initial state of the image. All we have to do is tell the CSS to use the transitions on this object:

It is now time to apply the animation. Do not forget to set the position to relative, otherwise the animation will not work:

Now just repeat the procedure for the title and content text. As you can see we used a custom animation that is not yet defined. The beauty of CSS3 is that we can now create our own custom animations and apply them to any object.

CUSTOM CSS3 ANIMATION

Custom animations can help you achieve some really nice effects with CSS only. The one we are going to create in this step is basic but will produce a really nice moving effect. Add following code at the end of the CSS:

Please note that we used moveFromBottom animation on content text. It uses the same principle so I am not going to reproduce it here, please download the source files to see the whole code in action.

If you don’t want to do the coding yourself, you can use a website builder to get a similar effect.”
[download id=”166″]