3 Fun and Easy Ways to Add Hover Effects to Your Images

When it comes to design, it’s the little details that make a difference. Sure, the design elements that are right in your face are important, but the small details that users happen upon are what take your design to the next level.

Let’s take image links for example. Maybe it’s a featured image thumbnail or a link in a post you want people to click on. It’s not enough to just have the image look like any other image on your site.

You need to show that the image is interactive, that an action can take place.

This not only helps make your site more user friendly, but it’s a great way to add a bit of personality to your site. It’s a small detail that has the opportunity to wow your readers.

To show action on an image, you’ll want to make the image change on hover in some way. There are a bunch of different techniques you can use to accomplish this. Below are three that you can implement right now:

1. Reduce Opacity

Let’s start with an easy image hover, shall we? Many sites reduce an image’s opacity on hover and with good reason. It’s simple and gets the job done. Here’s how you change an image’s opacity on hover:

a img:hover {
     opacity: 0.5;
}

In the above example, we’re targeting any image that’s a link. To get more specific, you’ll want to use inspect element to find the correct class to target.

To adjust the opacity, choose any value from 0 to 1. By default, all images have an opacity of 1, meaning they’re fully opaque. An opacity of 0 would leave you with a fully transparent image. Any number in between gives you a semi-transparent image, with a higher number being less transparent. Got it?

2. Desaturate

A second way to change an image on hover is to desaturate it.

a img:hover {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
}

The above code, takes an image and converts it completely to grayscale. If you’d rather just reduce the saturation of an image, change 100% (both instances) to any other percentage (from 0-100%).

3. Add Color / Saturate

In the above example, we desaturated an image, but what if you want black and white photos on your site, that when hovered over, become colorized?

Here’s how we’d do that:

First, let’s turn every linked image to black and white.

a img {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
}

Then, we’ll add the hover effect, which removed the grayscale filter:

a img:hover {
     filter: grayscale(0%);
     -webkit-filter: grayscale(0%);
}

And there you have it! Three easy ways to show action for your linked images. Now keep in mind that the above code examples all targeted any image that’s linked. If you only want it applied to featured images, you’ll have to apply it to that class.

For example, in a Genesis theme, you would apply it to .entry-image-link, like this:

.entry-image-link img:hover {
     opacity: 0.5;
}

That’s because Genesis uses the .entry-image-link class on their links surrounding the featured images. So targeting that rather than a img:hover would only change those featured images on hover, not every other linked image on your site.

Depending on your theme, that class will vary. The best method of finding the class you need to target is via inspect element in your browser.

Does your site currently change an image on hover? If not, look into getting it implemented. Then share your site in the comments below so I can see your image hovers in action.

The post 3 Fun and Easy Ways to Add Hover Effects to Your Images appeared first on Italicized Creative.