css3-tricks-featured-boxes-animation-570

CSS3 Tricks: Jumping Featured Boxes

February 27, 2012 by PremiumCoding - 9 Comments

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 CSS3 Tricks: Jumping Featured Boxes (1532)

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:

1
2
3
4
5
6
7
8
<div class="one_fourth">
     <div class = "boxImage"><img src = "images/321.png"></div>
     <h2>MOVIE CLIP</h2>           
     <div class = "boxDescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</div>  
</div>
... three other boxes...

</div>

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:

1
2
3
4
5
.homeBox {
     position: relative;
     float: left;
     display: block;
}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.homeBox .one_fourth {
     text-align: center;
     overflow: hidden;
     background-image: linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
     background-image: -o-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
     background-image: -moz-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
     background-image: -webkit-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
     background-image: -ms-linear-gradient(bottom, #F3F3F3 100%, #FAFAFA 0%);
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #F3F3F3), color-stop(0, #FAFAFA) );
     border: 1px solid #E1E1E1;
     -moz-box-shadow: 0px 1px 0px #ecebeb;
     -webkit-box-shadow: 0px 1px 0px #ecebeb;
     height: 228px;
     width: 228px;
     margin-right: 10px;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

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:

1
2
3
     .homeBox .one_fourth:hover{
background:#252525;
}

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:

1
2
3
4
5
6
.homeBox .one_fourth .boxImage {
     -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
     transition: all 0.2s linear;
}

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

1
2
3
4
5
6
.homeBox .one_fourth:hover .boxImage {
     position: relative;
     -webkit-animation: moveFromTop 350ms ease;
     -moz-animation: moveFromTop 350ms ease;
     -ms-animation: moveFromTop 350ms ease;
}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@-webkit-keyframes moveFromTop {
     from {
          top: -600px;
     }
     to {
          top: auto;
     }
}
@-moz-keyframes moveFromTop {
     from {
          -moz-transform: translateY(-600%);
     }
     to {
          -moz-transform: translateY(0%);
     }
}
@-ms-keyframes moveFromTop {
     from {
          -ms-transform: translateY(-600%);
     }
     to {
          -ms-transform: translateY(0%);
     }
}

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.
 

Download CSS3 Tricks: Jumping Featured Boxes (1532)