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.
The HTML code I used
<a class=”before-after” href=”/your image path/image.jpg”></a>
The CSS code
background: url(‘/your image path/image.jpg’) bottom;
background-position: 0 0;