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;
}

Leave a Reply

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