For Live Demo: Click here

CSS Code:

body
{
	margin: 0;	padding: 0;
	background: #1d1d1d;
	font-size: 10px;
	font-family: verdana;
}

h1{ 
	font-weight: normal; 
	font-size:3em; 
	font-family: serif, verdana;
	color:#fff;
}

h3{ font-weight: normal; font-size:1.4em;}

img {border: 1px solid #666;}

.info p{ font-weight: normal; font-size:1.0em;}

ul.popout
{
	width: 700px;
	list-style: none;
	margin: 0 auto; padding: 0;
}

ul.popout li
{
	display:inline;
	width: 100px;
	float: left;
	margin: 20px; padding: 0;
	position: relative;
}

ul.popout li:hover {z-index: 99;}
 
ul.popout li img{
	position: relative;
	filter: alpha(opacity=40);
	opacity: 0.4;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

ul.popout li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
 

ul.popout li .info {
	position: absolute;
	left: -20px; top: -20px;
	padding: 80px 10px 10px;
	width: 120px;
	display: none;
	background: #fff;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

ul.popout li:hover .info {display: block;}

HTML Code:

	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	
	
	

	

		
Heading
		
Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo.
	
	

For Live Demo: Click here