Change image on hover with CSS3

In this tutorial we're going to create an image that changes when you hover over it. We'll only use HTML and CSS3.

Demo

First of all we want to say that the image is not actually an HTML <img/>. We use a simple <div>.

HTML

CSS

As you can see the CSS is pretty simple. We use CSS3 transitions for the animation.