How To: Slide Images with Overlay Caption Using CSS and jquery – Easy Way

Today i found an article on Images with Overlay caption while reading feed of queness. Moreover , I previosly did one article on Lightest content slider ever which was really cool. Now , today i tried mixing these two tutorials and made one. That means I found the easy and light image slider. Pretty interesting, isnt it? So without wasting much time , lets start.

Here is the DEMO

The trick is simple , I just filled div mystuff with content inside div wrapper and tweaked little CSS of mystuff class.
Here is the html place it inside your body tag of your web page:

	

		 
		 
		 
	
 
 
	

 
	

		

 
			

				
				

					
This is image one. The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. 
Which was changed by the demand for tadalafil can be described as decision to do so in the future. Ultime news commenta i nostri articoli Levitra potrete trovare una serie il migliore tra viagra levitra cialis di metodi per migliorare.
 

				
			

			

				
				

					
This is image two. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. 
				
			

			

				
				

					
This is image three. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. 
				
			
 
		
 
	
  

Here is the CSS (little tweaked) , Place it inside your stylesheet:

#myslide {width:425px;overflow:hidden;position: relative;height:276px;margin-bottom:20px}
#myslide .cover{
		width:1275px; /*------- class mystuff width * number of mystuff divs (425 * 3 = 480)---------- */
		position: absolute;
		height:276px;
	}
 
	#myslide .mystuff {width:425px;float:left;padding:20px 0;}
 
	.button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
	.active{background:#111;padding:6px;display:block;float:left;outline:none;}
	.clear{clear:both;}

	div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	width:425px;
	/* styling bellow */
	background-color:black;
	font-family: 'tahoma';
	font-size:15px;
	color:white;
	opacity:0.6; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
	}

	p.description_content{padding:10px;margin:0px;}	

And here is the script part. Palace it inside script tag:

Check out the DEMO how it comes.
All Done!
Cheers!