Last month when I posted the Blog Font Style CSS series, Sara from Burnett's Boards asked about changing text color on hover. And then I realized that it must seem strange that I didn't cover hover effects at all when I talked about font style.
Honestly, I didn't even think to add hover effects to the font tutorials because you can use the CSS :hover pseudo-class on just about everything!
Today I'm going to show you some basic examples of hover effects you can try on your own blog, but first I'm going to talk a little bit about what a pseudo-class is, and about :hover compatibility.
The :hover Pseudo-class
In CSS, a pseudo-class is a "fake" class that you can apply to any HTML element. The pseudo-class effect is triggered any time a certain condition is met, like, for example, when the element is hovered over by your reader's mouse. There are lots of pseudo-classes available to web developers. You can check out a list of more pseudo-classes at the Mozilla Developer Network, but here we'll just focus on :hover.
When :Hover Works, and When It Doesn't
The :hover pseudo-class was created with mouse use in mind. If your readers are visiting your blog on a computer, they'll see your hover effects exactly as you designed them to work, even on older browsers like Internet Explorer 7.
But, visitors on smartphones and tablets will have a different experience.
The thing is, there's no real way to "hover" something on a touchscreen device. On a touchscreen, you're either touching something or you aren't — the screens haven't evolved enough to detect a finger hovering over the screen (yet!).
Since hovering isn't a real thing on touchscreens, :hover effects are usually triggered on tap instead, and the effect is typically very brief. But, sometimes they don't work on touchscreens at all. It's best to treat :hover effects as "nice to have" design details. Don't rely on them to do something essential.
Now that we've got that out of the way, let's play! If you're already familiar with CSS basics and would like to skip ahead to the live code demo, click here to open it up on Codepen.
The Very Basics of :hover Effects
You can apply a hover effect to any element on your blog by adding :hover after the element, ID, or class name in your CSS rule. So, for example, if I wanted to give every HTML paragraph on a page a pink background when it's hovered, I'd write a CSS rule like this:
p:hover { background-color: pink; }
With that CSS in place, every paragraph would have a pink background when a reader hovers their cursor over the paragraph. The background would turn back to its original color when the cursor moves off the paragraph.
Now that you've seen the basic structure of a :hover rule, let me show you some more examples!
Change Link Color On Hover
This is by far the most common use of the :hover pseudo-class. Links are special, and setting the :hover CSS for a link means you have to make a few other settings, too.
To style links properly, you need to specify CSS rules for four different states: Link, Visited, Hover, and Active.
The "link" state is when the link loads for the first time for your reader, before they hover or click on it. "Hover" is the hover state, when the cursor is over the link. "Visited" sets how the link looks if your reader has already clicked on it (either during their visit to your site or previously in their browser session). The "active" state is right when the link is clicked, and usually shows only very briefly as the link takes your reader to their destination.
In this example, I'm setting the colors for every state of all links on a site. If you want to set the colors for specific links only, you'll need to find the CSS selectors for those links.
a:link { color: black; }
a:visited { color: gray; }
a:hover { color: pink; }
a:active { color: yellow; }
I used X11 color names in this example, but you can use hex or rgb values if you prefer. Not sure how to find your color value? This tutorial will help!
Changing Backgrounds on Hover
You can switch the background color of any element on hover. All you need to do is write a :hover rule for your element with a new background color, like this:
.background-switch { background-color: pink; }
.background-switch:hover { background-color: lightblue; }
In this example, everything with the class "background-switch" will start out with a background color of pink, then switch to a background color of light blue when hovered.
You can change more than one thing at a time on hover, too. Let's say you'd like to change the color of the text in your element with the background-switch class. You can also set the text color inside the same :hover rule, like this:
.background-switch:hover {
background-color: lightblue;
color: white;
}
Hover Effects for Images
Some of the most creative uses of hover are with images. I'm going to show you two quick examples here to get you started, but be sure to check out the advanced tutorials linked at the end of this post for some really amazing stuff!
Tilt an Image on Hover
You can give your images a little twist on hover using the CSS3 transform property. This works in Firefox, Chrome, and Internet Explorer 9 and up.
The CSS for this is going to look very repetitive, and it is. Since we're using a new CSS3 property, we need to use vendor prefixes to ensure that the effect works in every browser type. Here's how I would rotate an image with the class "rotate" -10 degrees on hover:
.rotate:hover {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Image Outlines on Hover
This is another fun effect that gives your images a "framed" look when they're hovered. We'll use outline instead of border here because outlines make it easier to keep images lined up.
In this example, I'll give every image with the class .hover-outline a 5 pixel gray outline that is offset from the image by 10 pixels to create a "frame" look:
.hover-outline:hover {
outline: 5px solid gray;
outline-offset: 10px;
}
Try it Out!
I put up a Codepen with live demos of all the code snippets I shared above. You can visit the demo by clicking the "Edit on Codepen" link on the demo screen below, or you can click here to open the demo in a new window. You can edit the pen to test out different hover effects before you try them on your own blog.
<h1><a href="http://www.fakesite.doesnt-exist.com-tk">Hi. Hover me!</a></h1>
<p class="background-switch">Ok, now that you've done that, hover me next!</p>
<p>Now hover over the photos</p>
<img class="hover-rotate" src="http://www.placekitten.com/100/100">
<img class="hover-outline" src="http://www.placekitten.com/100/100">
Check out this Pen!When you're all set to add your new CSS to your blog, here's how to find where to enter your CSS:
If you're on Blogger, go to Template > Customize > Advanced > Add CSS and enter your CSS in the "Add custom CSS" field.
On self-hosted Wordpress, the place to add CSS will vary by theme & framework. If you're not sure where to enter it, you can use Jetpack's "Custom CSS" feature to add the CSS to your blog.
Wordpress.com users will need the premium Custom CSS option to add CSS.
If you're on Typepad, go to Blogs > Design > Custom CSS and enter your CSS in the "Custom CSS" field.
More Fun with :hover
My demonstrations are very simple, but there's a lot of other cool stuff you can do with hover effects! Here are three more advanced tutorials to inspire you.
- Circle Hover Effects with CSS Transitions from Codrops. Absolutely stunning CSS effects with CSS animation on hover.
- Five Cool CSS Hover Effects You Can Copy and Paste from Designshack. The title says it all :)
- Pop Hovers from CSS Tricks. A "bouncy" background color switch that looks like it's popping up on the page.
