CSS Image popup

Very easy and cool method to have a image pop-up on mouseover, all you need to do is just to call the 'popup' class to your image hyperlink.

Demo

Move your cursor over the thumbnail images

HTML

<a class="popup" href="#"><img src="images/flower0.jpg" alt="flower" width="135" height="87" border="0"/>
<span><img src="images/flower01.jpg" alt=""/></span></a>

Now have a look at the CSS code

.popup{
position: relative;
z-index: 0;
}
.popup:hover{
background-color: transparent;
z-index: 50;
}
.popup span{
position: absolute;
background-color:#EEEEEE;
padding: 5px;
left: -1000px;
border: 1px solid #DADADA;
visibility: hidden;
}
.popup span img{
border-width: 0;
padding: 2px;
}
.popup:hover span{
visibility: visible;
top: 20px;
left: 20px;
}