Animate image on mouse hover | Interactive pure CSS technique

You should already know

Let´s have a look on what we will do

Our goal here will be to learn how to create simple interactive effects for images as they are on pictures bellow.

Let´s start!

As you´ll see, this technique is super-easy and you´ll use the same principle really often. It is basically swap of two images using CSS pseudoclass HOVER. We will work only with empty div and bit of CSS in external stylesheet.

Classes in CSS

Let´s have a look briefly on simple classes first, so we can understand the difference easier. Classes enables you to specify the design of elements. For example to distinguish between two divs.

Now pseudoclasses

As we´ve seen, with classes we can tweak or modify html elements. These modifications are however still and static. With pseudoclasses, we can add more dynamics by adding a condition to class. IF something, DO this. Let´s introduce available pseoudoclasses first.

link

unvisited link

visited

visited link

hover

...hover over the link

active

selected link

Pseudoclasses are classes which become active only when specified condition is fullfiled. For example change color link, when it has already been visited, when it is selected, or when you hover over it. Hover is the one, we will be using to achieve this effect. Instead of providing some simple but misleading example of use, let´s apply it right on our problem.

Technique itself

You´ll surely be surprised how simple it actualy is. We will create a <div> with dimensions of image we prepared earlier. Those should be two image of same size obviously. In this case, second image is animated gif, which gives a bit of action into whole think in my opinion. We will add a class into div and leave it empty (name of class is not important really, you can call it however you want). Next we will move into stylesheet where we define the class itself. set the dimensions and most importantly the background image. It will be the one you want to appear as default, when nothing happens.

As you can see, in HTML you define class by attribute class="", but when you write it into stylesheet, you´ll just add a dot before the name. Now we want to tell browser, that if we hover over the image, our newborn pseudoclass, will be applied. Pseudoclass will keep the informations from class itself, but can add a new one, or rewrite if you want since it automaticaly has higher priority. We will only rewrite the background image. You´ll create pseudoclass simply by adding :hover (or :link, :visited, :active) right after the class itself. WITHOUT any GAP! That´s important.

HTML remains the same, only change that will be applied is background image. That´s what we wanted. Congratulations, you did it!

Outro

This hover pseudoclass is really powerful tool when you realize how many things you can actually change in stylesheet. You can also combine it with trasitions, or CSS animations and create fast + web-safe designs. Hope it was helpful a bit and enjoy your experiments with pseudoclasses.