This project will teach you how to animate pictures using CodePen.

Duration: 10 mins

Level: Beginner

Programming Language: HTML and CSS

What you will need:

  1. A laptop or desktop
  2. CodePen account (sign up here)

Part 1: HTML (backbone of the website)

The goal is to make the car move from left to right and to make the sun bigger when you hover your mouse over it.

  1. In HTML, you will need to have two div elements that will represent the sky and the ground.
  2. Add in the image of the car and the sun inside the div element representing the sky.
  3. You can also replace the image sources from an image in google by
  • Search for an image you like
  • Right click on the image
  • Click on “copy image address”

Part 2: CSS animation

  1. For the sky, define the height, color and position (relative means that the sky will be at the back of the page.
  2. For the ground, define the height of the ground and make the background color to be green
  3. The sun will be in an absolute position meaning that it will be on top of the sky. Put the sun 30px from the right side of the sky. The original size also needs to be set to know the difference between the bigger size when hovering over it
  4. The car will be 100px from the top of the sky in an absolute position. To make it move, the animation name, duration and number of times it will occur needs to be set.
  5. Key frames will define the movement of the car, moving from left to right.
  6. Hover will be the trigger for the sun to scale up in size

You can also watch and code along with our instructor here and you can also pin it below!