8. Animation

Activity 8.01: Animating Our Video Store Home Page

Solution

Complete this activity by following these steps:

1. First, take a copy of Activity 6.01.html from your Chapter06 folder and save this in your Chapter08 folder as Activity 8.01.html. Now, we're going to edit the navigation links so that they have a CSS transition on the active hovered navigation link item. We will do this by moving it slightly upwards and then smoothing the transition of its hover color to red. Both transitions will be completed over 500 milliseconds. This will be triggered upon hovering the mouse over the link. Note that we only want to apply this to our desktop screen sizes since this could impair the usability of the mobile layout for users otherwise. We'll achieve this now.

   In the CSS <style> tag, within the @media (min-width: 768px) media query selector, while editing the nav a selector, we're going to add the following new properties:

   position: relative;
   top...