CSS Image hover

This is an example of using pure CSS to switch images in and out of hover states. In this example, I show what a site looks like now, and when you ‘hover’ over the image, it will show you what it looked like before.

The first thing is to place both images into a single file, and have CSS display only the top or bottom, which in this case, I start by showing only the bottom bit, and setting the background image to position 0,0 when you hover.

CSS Hover Example

 

The HTML code I used

<a class=”before-after” href=”/your image path/image.jpg”></a>

The CSS code

.before-after {
display: block;
width: 350px;
height: 385px;
background: url(‘/your image path/image.jpg’) bottom;
}

.before-after:hover {
background-position: 0 0;
}

Trackbacks

  1. […] Oh yes, photos used on the slider were taken by my son, Ben. Below is the new site, and if you hover over the site, you can see what the site looked like before. I wrote about how I used CSS to achieve this hover effect here. […]

Leave a Reply

Your email address will not be published. Required fields are marked *