Double vision ;o

I thought I'd explain how I did some of the web design on mcla.ug, as I picked up a few CSS tricks along the way. Here I'll show how to have one image fade to another when you hover, like in the large circle with my face in it on my homepage. (If you are on touchscreen device, usually tapping the image will have the same effect as hovering will on a device with a cursor.)

Puppy

eee puppy

Beautiful floral puppy – but how was this achieved?

Two images on top of one another

I did this by putting two images on top of each other. One of them goes invisible when the mouse hovers on it; the other is invisble until the mouse hovers on it.

Here are two such images, but side by side:

When these two images are in the same place, hovering on one means hovering on the other too. The visible image will fade, and the previously invisible image will replace it.

We now have the theory of how this is done – but how do we put it into practice?

CSS

This is all achieved through CSS – no need for ugly Javascript here ;)

First, we create a class. The class specifies all the things that we want the two images to share: their position, their shape, and their size. I want both my images to be a circle of a particular size and position, and so I have called my class circle:

.circle {
    display:block;

    /*Position*/
    position: absolute;
    top: 330px;
    right: 500px;

    /*Dimensions*/
    width:294px;
    height:294px;

    /*make it a circle*/
    border-radius:50%;
    }

We can now make two instances of the class, each with a different image. We will also give each of them different opacity, which will control how visible the images are.

#circle_top{
    background-image: url(puppy1.jpg);
    background-size: 140%;
    background-repeat: no-repeat;
    opacity:100;}

#circle_top:hover{
    opacity:0;}

#circle_bottom{
    background-image: url(puppy!.jpg);
    background-size: 140%;
    background-repeat: no-repeat;
    opacity:0;}

#circle_bottom:hover{
    opacity:100;}

As you can see, we have set one image to go from fully opaque to transparent upon hovering, and the other to go from transparent to fully opaque. Nice! There is one more trick to add though: transitions.

Transitions

I like for the images to fade gradually. To do this, you need to add an extra attribute to the circle class:

.circle {
    display:block;

    /*Position*/
    position: absolute;
    top: 330px;
    right: 500px;

    /*Dimensions*/
    width:294px;
    height:294px;

    /*make it a circle*/
    border-radius:50%;

    /*transition opacity*/
    transition: opacity 0.3s ease-in-out;
    }

The images will now gradually fade into each other – you can experiment with how long you want them to take. I decided on 0.3s here.

We now have all the CSS we need – all we need now is some HTML.

HTML

The HTML required is very simple. We simple create two divs, each belonging to the circle class, with the appropriate IDs.

<div class=circle id=circle_top></div>
<div class=circle id=circle_bottom></div>

...and you're done! Have fun, brave little web dev.