Jquery缩略图标题弹出效果

本教程将向你介绍如何在缩略图添加jQuery超酷的过渡效果来显示标题。只有当用户想要看到它，才显示，使你的网站更简洁。

1. HTML

<div class="photo">
	<div class="heading"><span>Pier</span></div>
	<img src="images/pier1.jpg" width="300" height="186" 
		     -moz-opacity:0.6;    
			-khtml-opacity: 0.6;  

		}
		
		.photo .heading { 
			
			/* hide it with negative value */
			/* it's the height of heading class */
			top:-50px;
		}

		.photo .caption { 		
			/* hide it with negative value */
			/* it's the height of bottom class */
			bottom:-50px;		
		}
		

		/* styling of the classes*/
		.photo .heading span {

			color:#26c3e5;	
			top:-50px;
			font-weight:bold;
			display:block;
			padding:5px 0 0 10px;
		}
		
		.photo .caption span{
			color:#999;	
			font-size:9px;
			display:block;
			padding:5px 10px 0 10px;
		}