Tinting images with CSS for cool hover effects

- Hi everyone. This is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson I'll show you an awesome way to create unique and compelling tinted images hover effects with CSS. Web designers and developers often strive to engage visitors interactively in fun and interesting ways. One quick way to add interactivity with your images is to play with CSS link states. There's good news and bad news when it comes to tinting images with CSS. The good news is that there's a relatively new CSS3 selector that can alter images on a web page using filter effects.

The not so good news is that currently only Chrome supports this awesomeness. But let's take a look at what you can do with CSS3 filter effects in Chrome by visiting the CSS filters demo page on appspot.com. The filter has 10 possible properties. Blur, grayscale, drop shadow, sepia, brightness, contrast, hue, invert, saturate, and opacity. What's great about this demo tool is it shows you easily how to code each property's value.

For instance, the sepia, grayscale, invert, and opacity properties can all be set in increment values of 0.1 to 1. The contrast, brightness, and saturate properties can be set to values between 0.1 and 10. Blur uses pixel values from 1 through 10 while drop shadow has horizontal and vertical offset links, blur radius, and color.

The property that handles the image's tint is called hue rotate which uses degree values in increments of 30 to represent the colors around the spectrum. With the hue rotate bar slider selected you can even use your left-right arrow keys to toggle though all the color possibilities. The tinting is fairly light so if you wanted a darker look you could try pairing it with some saturation. With these filters you can combine any of the 10 properties to create unique image styles.

What's fantastic about these CSS filters is that they provide designers with new opportunities to adjust image colors with CSS, much like you would do using adjustment layers in Photoshop. In addition, changes in style like these can be made into interactive elements using link, hover, and active states. For example, using Chrome styles I can convert this image into a rollover. I'll start by giving it a null link in the HTML and then add a class style attribute to the link.

Then in the CSS I've created a class style for the rollover effect that will change the image on both hover and active states. This ensures that the effect is accessible to visitors on mobile devices. In this example, I've combined the grayscale, sepia, and hue rotate filter effects. Here's how the effect looks in Chrome.

It's a pretty great effect. The filter property is a huge breakthrough for CSS coding and hopefully other browsers will begin supporting it soon. So, what do we do if we still want to tint our images outside of Chrome? Well, several people have come up with alternatives. There's a great article on impressivewebs.com listing three methods that involve varying bits of a jQuery or an extra wrap element to function.

However, if you're seeking a CSS only method I recommend the technique listed on the CSS tricks website which applies a uniform tint to an image through double gradients using multiple backgrounds. Let's take a look at the solution. This clever method uses a class CSS style that sets the width and height of the element then it uses two linear gradients with the same color above the photograph to produce the tint. Rather than using hexadecimal values it uses RGB colors along with alpha transparency.

To view the tinted image, the style is then applied to the div. Of course, this method has some limitations because it only allows for a single image to be used. Even so, this is a great start. But let's push this method one step further by converting it into a hover active state with a little bit more CSS. In my HTML I've marked up my div container with two class styles. One for the CSS tricks method tinting and another to give the image a border.

In the CSS I've modified the tinted image style to only show the background photo. I've also created a hover active state for the div container so that the image changes when visitors hover over or happen to click on the image. For this style I've made the tint a pink color and added a few more properties such as changing the cursor to a pointer, altering the border color, and adding a linear fade transition for the tint effect.

Let's see what it looks like in a browser. This is a great effect. If you're looking for a new way to engage your visitors with a simple interactive color change for images on your site I encourage you to try these techniques. While there's no word on the street yet about support for CSS3 filters beyond Chrome, in the meantime you can use one of these creative solutions for tinting your images and making them interactive with CSS.