Activity 8.01: Animating Our Video Store Home Page
Complete this activity by following these steps:
- First, take a copy of
Activity 6.01.htmlfrom your
Chapter06folder and save this in your
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
500milliseconds. 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 aselector, we're going to add the following new properties:
position: relative; top...