Animating images using CSS

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

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!

    9 Comments

  1. Hey Brad,

    Thanks for sharing your code. I made a rocket some time ago, but your $1.00 special has it beat by a long shot. I may try a hot air balloon or the family dog.

    Flash Buddy

    April 3, 2015

    • Thanks Flash! The Dollar Photo Club vector has anything I could create beat by a long shot too. In fact, my rocket probably wouldn’t get off the ground – even with the CSS animations. 🙂

      Brad (admin)

      April 3, 2015

    • Love it! Your rocket animation was really good too. Really liked the trailing flames and how you slowed it down

      Brad (admin)

      April 4, 2015

  2. Tried this and works. Most of it. Can’t get the rocket on top of the other sections.
    And I would like not to have to hover over some text to get the rocket launched…
    If that’s possible?

    Eric

    January 18, 2016

  3. Is it possible to animate a logo, when hovering over the fullwidth header scroll down button?
    I’ve tried using this code and renaming the following :

    #rocket .et_pb_column:hover + .et_pb_column_1_3 img{

    to

    #rocket .et_pb_fullwidth_header_0 .et_pb_fullwidth_header_scroll a .et-pb-icon:hover + .et_pb_fullwidth_header_0 .header-content img{

    I’ve added the CSS ID to the section, nothing seems to happen?

    Marco

    March 9, 2016

  4. How to animate the rocket, when hovering a menu item?

    Andy

    April 3, 2016

  5. This is a killer post, love it!

    Harper

    August 14, 2016

  6. love this thank you

    Robert

    September 1, 2016

Post a Reply

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