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.

Tento článek vám přinesl Toník tony slacik carnivora profile photo Toník Sláčík Animation, Special Effects, CG SFX, Properties I have no description!


What is this picture from? Have you seen Jump the Pain? | Weird music audio-visual project from Prague. Click here to learn more... (it´s for free)
Hledání

Objevte tajemství Carnivorských archivů, prolistujte dávno zapomenuté plány a anály. Stačí jen vepsat co hledáte, podívat se do slunce a nahlas vyslovit "渇しても盗泉の水を飲まず" pak už jen stisknout tlačítko "Dělej". Na to co spatříte vzápětí do smrti nezapomenete.

Novinky Emailem
Sociální netwoři Rich Site Summary Máte v oblibě Carnivorské články? Zůstaňte v kontaktu s Carnivorou a buďte informováni ihned co nový článek porodíme! Upište se našemu RSS krmítku a budete prostě IN! Žádné tweety, jednoslovné zprávy, systémová hlášení. Jen opravdové články.Zůstaňte v obraze co do novinek ze světa open-source a free softwaru, především však jejich použití. V kontaktu se světem experimentálního filmu, speciálních efektů, animací a CG dostupné pro každého (kromě Pepika). Google+ Spojte se s námi na Google+ a buďte informováni o všem co se v Carnivoře šoustne. Facebook Zpřátelte se s námi na Facebooku a ... a tak Vimeo Fandíte Vimeu? Výborně, my taky, pojdmě se potkat tam! Budem se těšit. YouTube Preferujete YouTube, pojďme se náhodou potkat tam! Pokud byste si nás přidali, vůbec by to nevadilo, ale žádný tlak. Myspace Navštivte náš profil na MySpaceu Stumble Upon Doporučte stránku na Stumble Upon! Klout Přidejte se k nám na Kloutu. Twitter Pojďme štěbetat spolu! Přidejte si Carnivorský pablšing na Twitteru. Digg Sdílejte svůj úžasný zážitek z Carnivory na Twitteru Delicious Sdílejte Carnivoru na Delicious. Velmi nám tím pomůžete. Reddit Sdílejte své dojmy na Reddit GMail Napište nám! Někdy to i čteme a sem tam i odpovídáme. Diskuzní fórumNejlepší způsob, jak zůstat v kontaktu s Carnivorou, je navštěvovat fórum. Zde se to vše odehrává. Přidejte se k nám pomozte nám evovlovat pomocí vašeho pohledu a názoru na věc. Ne
Česky | Anglicky
Your Ad Here