As explored in my previous blog post, CSS is a powerful tool that makes websites a lot more exciting and visually pleasing. You can style text (mainly links), but you can also add an additional layer of styling to text and images: hover effects. This means when you move your cursor over a specific set of text or an image, something will happen.

Bookmark this blog as a cheat sheet to use for reference when styling your next project or website!

Changing background color

A fun way to add a simple hover effect is changing the background color. You can add :hover to the appropriate class and addbackground-color with a color value and it will change to that color on mouseover.

a:hover {
  background-color: pink;
}

Bolding text/adding an underline

These the simplest forms of hover effects: adding an underline or bolding the text. Both modifiers are below. The text-decoration adds an underline, while the font-weight makes the text bold.

a:hover {
 text-decoration: underline;
 font-weight: bold;
}

Changing font/font size

You can also alter the font of the text or link upon hover by adding the below code. Also, adding the font-size modifier will allow you to grow or shrink the font size upon hover.

a:hover {
 font-family: monospace;
 font-size: 150%;
}

There are so many more complicated link hover effects that use CSS animation and can add borders/boxes/wipe effects to your text and links. Google and play around with them to find which one suits your needs!

Image hover effects are fun ways to give your website a little excitement. Below, I will be showing bits of code that feature class names in the CSS that make these effects come to life. Be sure that your images/divs have these class names if you are trying this on your own.

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

This is a fairly straightforward one that changes the opacity of the image on hover to be 100%. It can make pictures on a photographer’s portfolio page, for example, really come to life.

.color:hover
{
        background:#53a7ea;
}

You can easily change the color of a border, div or any other shape on your website by just setting a new background/border color in your CSS. Swap out the color value and you’re set!

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

You can alter the size of divs or images using the hover effect above. You can also reverse the effect and make your images grow larger than their current size by changing the scale values (currently 0.8) above to something over 1.0 like 1.3.

Hover.css

One of my favorite hover effects resources that I didn’t cover in this blog is Hover.css. It is a robust resource full of effects that can be applied to so many elements on your website. They have 2D transitions, background transitions, border transitions, icons, shadow/glow transitions, speech bubbles and curls. I highly recommend exploring this extremely helpful resource if you want to learn more!

This hardly scratches the surface of CSS’ hover effects. There are so many fun effects that can be customized and tweaked to fit your needs perfectly. Enjoy playing around with these and adding some fun flair to your website!

This article was originally published by Peyton doyle on medium.