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.

<div class="greendiv">goat</div>
<div class="bluediv">cucumber</div>
.greendiv {background-color: green; padding:10px;}
.bluediv {background-color: blue; padding:5px;}
result:
goat
cucumber

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.

<div class="imagehoverswap">goat</div>
.imagehoverswap {width:400px; height:320px; background-image: url('/directory/path/your_image.jpg');}

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.

<div class="imagehoverswap">goat</div>
.imagehoverswap {width:400px; height:320px; background-image: url('/directory/path/your_image.jpg');}
.imagehoverswap:hover {background-image: url('/directory/path/your_second_image_for_hover_effect.gif');}

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.

Brought to you by Tony tony slacik carnivora profile photo Tony Slacik Animation, Special Effects, CG SFX, Properties I have no description!


Facehunger Without Face | Seeking revenge in cold, dark, huge and empty space... watch FCHG WF here!
Search

Discover the secrets of Carnivorian library. Search in ancient archives of amazing articles and open-source research. Just type what you are looking for into that white field above, say "渇しても盗泉の水を飲まず" and click that magic button "Ok, sniff it!". You´ll never forget the following events.

News by Email
Social networks Rich Site Summary Do you like Carnivora articles?. Stay in touch with us! Subscribe to our RSS feed and you´ll be infromed whenever a new article will be posted. No tweets, no one-word news, no spam. Just "serious" articles. Stay in touch with open-source and free software news in human readable way. And in touch with research of computer graphics, animation and experimental movie techniques. Google+ Join us on our Google+ page and stay informed about upcoming projects and articles. Facebook Become our friend on Facebook and share your opinion on projects. Vimeo Got Vimeo?! Cool, we too, let´s meet there. Looking forward! YouTube Prefer YouTube? Right, visit us there and tell us what you think. Subscription will be nice indeed, but no pressure... Myspace Visit our profile on MySpace. Stumble Upon Recommend us on Stumble Upon! Klout Help us in Klout performance by visiting our profile, joining us or even giving us a point or two... please. Although we don´t really know how it works, but it looks serious and important... Twitter Let´s tweet together, join us on Twitter and stay in touch with Carnivora every second... well that sounds horrible... every day seems to sound better. Digg Recommend Carnivora on Digg, give us thumb, or like, something :) Both might be acceptable compromise Delicious Share your experiences from Carnivora on Delicious and spread a word. You´ll gretly help us this way. Same as any other time you actually mention us somewhere. Reddit Preffer Reddit? Well, visit us there! GMail Email us! Anything you have to say secretely? Do not hesitate to write us. Really, we might even read it some day! Discussion forumBest way to stay in touch with us is joining the forum, which is a heart of our production and where the projects are dicussed and realized. Register in the forum and help us to evolve by sharing your opinion and point of view.
Czech | English
Your Ad Here