Add Hover Effects

You can make your website more interactive by making cool stuff happen when you hover over things with the mouse cursor!

Find your CSS rules for the img elements, or create some if you don’t have any. Add in a border, and then add a new block of rules right below:

img {
  border: 2px solid White;
}
img:hover {
  border: 2px dashed Navy;
}

You’ve just used a special type of CSS block called a pseudo-class.

How does it work?

A pseudo-class is a bit different from a class that you create yourself. You can recognise it by the :.

Pseudo-classes come built in to HTML elements: you can add :hover style rules to any element, class, or id selector in your style sheet without needing to add anything extra in your HTML code.

What do you think will happen? Check what pages on your website have pictures on them (add a picture if there aren’t any!), then move your cursor over a picture to find out!
Let’s use this new :hover pseudo-class together with a CSS class to make links glow when you hover over them! Add a link to your web page and include an attribute to specify the class name. Remember, links are defined using the <a> tag, like so:

<p>
  <a class="niceLinks" href="https://en.wikipedia.org/wiki/Bird_conservation">Click here</a>
    to read about bird conservation on Wikipedia.
</p>

Add the following code to your style sheet, then run your code to see your lovely links in action.

.niceLinks {
  text-decoration: none;
  color: #FFFAF0;
}
.niceLinks:hover {
  color: #00FF7F;
}

Why not add the attribute class="niceLinks" to all of the links in your menu bar as well?

You can combine all of these tricks with animations too!

Find the CSS block for the picture of the barn owl again (or whatever picture you were working on earlier). Add the following code to your style sheet file:

#owly {
  border-radius: 100%;
  width: 100px;
}
#owly:hover {
  animation-name: rollOver;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes rollOver {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

Can you guess what will happen?
Move the cursor over the picture to find out!

Challenge: make glowing rainbow links

Can you use the rainbowGlow animation from the previous card to make the links in your menu keep changing colours when the cursor is hovering over them?

I need a hint

Below is the code for the rainbowGlow animation. It has five stages defined, and it sets a different text colour at each stage. You can add more or change them however you want!

@keyframes rainbowGlow {
    0% {
        color: #00BFFF;
    }
    25% {
        color: #00FF7F;
    }
    50% {
        color: #eeeeaf;
    }
    75% {
        color: #eeafee;
    }
    100% {
        color: #00BFFF;
    }
}

To animate something, you add the three animation properties to its style rules as you’ve done above. Always make sure the animation-name matches the name of the animation you wish to use.

You can add hover effects directly to the nav menu like this:

nav ul li a:hover {
  animation-name: rainbowGlow;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

Or, if you want to make other links on your website flash rainbow colours too, you can add the animation to the .niceLinks class instead, like this:

.niceLinks:hover {
  color: #00BFFF;
  animation-name: rainbowGlow;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

Bird Watch Website 2.0