CSS Text & Image Hover Effects Cheat Sheet

Peyton Doyle
Oct 31, 2019 · 4 min read
Image for post
Image for post

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!

Image for post
Image for post

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;
}

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;
}

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 for post
Image for post

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.

Image for post
Image for post
.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.

Image for post
Image for post
.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!

Image for post
Image for post
.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.

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!

Source referenced when creating this blog.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store