CSS: image zoom effect

Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.

The HTML

We are going to use two images: one is the small version and the second is the large one. When the user puts the cursor on the small one, the large one will appear. Very simple, isn't it?


 
 


The CSS

In the CSS rules, we need to temporary hide the large image and then create a hover rule to make it visible.

a.zoom span
{
    position: absolute;
    visibility: hidden;
}
a.zoom
{
    position: relative;
    z-index: 0;
}
a.zoom:hover
{
    z-index: 1;
}
a.zoom:hover span
{
    visibility: visible;
    top: 10;
    left: 70px;
}

As you can see the large image has an absolute position. We can change the top and left values in order to make it visible in a particular section of your viewport.

Piece of cake!