Hover large image

Hi All,

Today I am presenting hover large image using html and css. This is very useful in terms of performance because no external files are required. I have used single HTML page.

See below html page

<html>
<head>
<title>Hover Large Image</title>
<style type="text/css">
.hoverimage a .large{display: none;}
.hoverimage a:hover .large{display: block;position: absolute;top: 70px;left: 0px;z-index: 1;}
.hoverimage img{border:0;vertical-align: top;width: 80px;height: 60px;}
.hoverimage li{border-color: #ccc;border-style: solid;border-width: 1px;display: inline;float: left;margin: 3px;padding: 1px;position: relative;}
.hoverimage .large{width: 480px;height: 360px;}
</style>
<!--[if lte IE 8]>
<style>
.hoverimage a{position: relative;}
.hoverimage a:hover{display: block;z-index: 1;}
.hoverimage a:hover .large{top: 70px;left: 0px;}
.hoverimage li{position: static;}
</style>
<![endif]-->
</head>
<body>
<div style="padding-top:50px; padding-left:200px;">
<ul>
<li>
<a href="#"><img src="img/1.jpg" alt="description" /><img src="img/1.jpg" alt="description" /></a>
</li>
<li>
<a href="#"><img src="img/2.jpg" alt="description" /><img src="img/2.jpg" alt="description" /></a>
</li>
<li>
<a href="#"><img src="img/3.jpg" alt="description" /><img src="img/3.jpg" alt="description" /></a>
</li>
<li>
<a href="#"><img src="img/4.jpg" alt="description" /><img src="img/4.jpg" alt="description" /></a>
</li>
</ul>
</div>
</body>
</html>

I have also attached the sample code.

You can download it from here, hover_image