How to Create Simple Image Transformations
There are many times when you might want to have an image or icon on your website change when a website visitor moves their mouse over the image. This design strategy is used frequently with images embedded into navigation menus to highlight the item that is currently selected or to draw attention to an image when a visitors mouse hovers over that image.
Contents
A Classic Example
Let’s say that you have a home icon linked to your website homepage and you want it to change from gray to orange when a website visitor lets their mouse hover over the link. 
Strategies for Changing an Image on Mouseover
There are several different ways to achieve this effect:
- If you’re working with icons that are available as an icon font, you can simply use CSS styles the same way you would with any font styling.
- If you’re working with smooth vector graphics (SVG), a graphic format that is rapidly growing in popularity, it is also easy to create this effect by changing the color of the graphic itself.
- If you’re working with image files such as .jpg or .png you can use CSS, JavaScript, or the JavaScript library jQuery to create the transformation by replacing a gray image with an orange one.
Working with font icons is the easiest way to accomplish this effect. However, you may be working with an icon that isn’t available as a font. Working with SVGs is rapidly in growing in popularity, and is the best solution from a technical perspective, but working with SVGs is more complex than working with image files or icon fonts. Creating this effect with image files is fundamentally different from using icon fonts or vector graphics. When you use icon fonts or vector graphics you use CSS to change the color of the original icon or graphic. When you use image files you actually replace the original image file with a new image file.
Creating Transformations with Image Files
In this tutorial will show you how to work with image files and CSS to create the gray-to-orange transformation. We also have tutorials available to show you how to create the same transformation with JavaScript and jQuery and how to use this effect in a simple responsive navigation bar.
Using CSS Styles to Change an Image on Hover
The basic idea when using CSS to create an image transformation is to use CSS to load a background image, and then create a second CSS rule that replaces the original background image with a new background image when a visitor hovers over the image. The CSS selector used to create this transformation is the :hover selector. Rather than using HTML to load the image, we’re going to serve the image up using CSS. We’re doing this so that we can replace the image served up by using CSS.
Creating an HTML Element for our Image
Before we can write the CSS rules, we need to write a little HTML. We’re going to create an HTML anchor element, because in our example the image is to be used as a link to the website homepage.
<a id="home_icon" href="#"></a> For the sake of this example we’ve left the href attribute empty, but in practical application, you would insert the address for the location where you want the link to point.
Using CSS to Load a Background Image
We’ll now use CSS to apply a background image to this element.
#home_icon { background-image: url("../path/image_file"); width: 128px; height: 128px; display: block; } That CSS rule uses the anchor element ID to select the anchor element where we want our image to appear and loads a background image for the anchor element. We’ve also created width and height rules because without them the anchor element would shrink down so that it was only as large as the contents of the anchor element – which in this case we left empty. We also create a rule displaying the anchor element as a block level element. By default, anchor elements are inline elements, and applying the width and height rules would not affect an inline element. In practical application would probably use display: inline-block;, but we’re using display: block; in this case so that we can center the image in our example a little further down the page.
Using CSS to Change the Background Image on :hover
The next rule will tell the browser to replace the original background image with a new image when a visitor hovers their mouse pointer over the link.
#home_icon:hover { background-image: url("../path/image_file"); } If we put all of that together here’s what we get:
Other Ways to Create Interactive Image Transformations
That’s one way to change an image interactively. However, many modern web developers would prefer to use the JavaScript library jQuery to do the same thing. You can learn how to use jQuery to change an image on hover in this tutorial.
