By now we've all seen the flying rocket or floating hot air balloon on more than one website. This tweak shows you just how easy it is to create, giving your website some animation flair without slowing it down.

The first thing you'll want to do is pick an image. I got this snazzy rocket from Dollar Photo Club for - you guessed it - one dollar!Can't beat that. (Dollar Photo Club was bought by Adobe) Rockets and balloons are popular, but you could use any object: bird, football, the sun, etc. The key is to use an image with a transparent background. You're probably not going to find many online, so you'll need to find an image with clearly defined edges and crop out the background using Photoshop or another image editing software.

In Photoshop, I like to use the Magic Wand tool to select the background, then right click on the selected background and left click on Select Inverse. Now your object should be highlighted. Right click on the object and left click on Layer via Copy. You should now see the object in a new layer without the background. Simply hide the background image and crop the new layer around the image to the size you want. Left click on File and then Save for Web and Devices. Just make sure you save the image as a GIF or PNG with transparency enabled, otherwise it will insert a white background.

Now the fun part. We're going to insert the image into Divi's Page Builder and add the animation. In my example, I'm going to create a new section with a 2/3 column on the left with some text and a 1/3 column on the right with the image. When the text is hovered over, the rocket will start to shake and then lift off into space. Pretty cool.

1. Open the page you want to insert the rocket and create a new section. In the section menu under CSS ID:, give it any ID you want. I'm going to use 'rocket'. If you use something different, you'll have to change the CSS below and replace 'rocket' with your ID.
2. For added effect, you could also add a background to the section like water, sky, tress, etc.
3. Insert a 2/3 column on the left followed by a 1/3 column on the right. In the left column, add any module you like. I'm going to use text to keep it simple. In the right column, add an image module and insert your image with the transparent background. You'll probably want to change Remove Space Below The Image to Yes in the image module menu.
4. Save your page and view it just to make sure everything is there and the image is displayed correctly.

Now we'll add the CSS to animate it.

Copy and paste the following lines into your style.css file.

#rocket img {
margin-top: 100px;
opacity: 1;
}

#rocket .et_pb_column:hover + .et_pb_column_1_3 img {
-webkit-animation-name: rocketShake;
-moz-animation-name: rocketShake;
animation-name: rocketShake;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}

@keyframes rocketShake {
0% {
transform: translate(2px, 0px) rotate(2deg);
}
10% {
transform: translate(-1px, -10px) rotate(-1deg);
}
20% {
transform: translate(-3px, -20px) rotate(1deg);
}
30% {
transform: translate(0px, -35px) rotate(0deg);
}
40% {
transform: translate(1px, -55px) rotate(1deg);
}
50% {
transform: translate(-1px, -85px) rotate(-1deg);
}
60% {
transform: translate(-3px, -115px) rotate(0deg); opacity: .9;
}
100% {
transform: translate(0px, -580px); opacity: 0;
}
}

@-moz-keyframes rocketShake { /* Firefox */
0% {
-moz-transform: translate(2px, 0px) rotate(2deg);
}
10% {
-moz-transform: translate(-1px, -10px) rotate(-1deg);
}
20% {
-moz-transform: translate(-3px, -20px) rotate(1deg);
}
30% {
-moz-transform: translate(0px, -35px) rotate(0deg);
}
40% {
-moz-transform: translate(1px, -55px) rotate(1deg);
}
50% {
-moz-transform: translate(-1px, -85px) rotate(-1deg);
}
60% {
-moz-transform: translate(-3px, -115px) rotate(0deg); opacity: .9;
}
100% {
-moz-transform: translate(0px, -580px); opacity: 0;
}
}

@-webkit-keyframes rocketShake { /* Safari and Chrome */
0% {
-webkit-transform: translate(2px, 0px) rotate(2deg);
}
10% {
-webkit-transform: translate(-1px, -10px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, -20px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, -35px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -55px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, -85px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, -115px) rotate(0deg); opacity: .9;
}
100% {
-webkit-transform: translate(0px, -580px); opacity: 0;
}
}

Save your style.css file and go back to the page with the rocket. Now when you hover over the text in the left column, you should see the rocket begin to shake, lift off, and then fade out.

Keep in mind that the animation will only work in modern browsers. It should work in Chrome, Firefox, Safari and IE 10 and up. There are a million ways you could change the animation to fit any image. If you don't want the image to shake, you can change the keyframe translate and rotate values. For translate, change the first number in each frame to 0 to keep it from shifting left and right. The second number changes the Y position of the image. For rotate, just delete all instances of rotate. For more information on CSS animations and what you can do, I find myself coming back to this website for reference: CSS Animations.

If you end up using this tweak, please feel free to link to your website for everyone to see!