<img> tag and display the image as a the background-image of an
<a/> (anchor) tag instead.
Let’s look at an image that could be used as a CSS hover image.
As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:
<a class="myButtonLink" href="#LinkURL">Leaf</a>
As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:
background: url('/path/to/myImage.png') bottom;
background-position: 0 0;
We’re using the CSS psuedo-element
hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the
background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.
Move your mouse over the image to see the hover in action.
And there you have it, a pure CSS approach to image hovers. You can apply this method to links,
<div/> tags, and just about anything else you can imagine in your site’s design. Happy styling!