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

By /

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

   
                 
                 
                 
         
 
        
 
        
                
 
                        
                                
                                
                                        
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. 
                                
                        
 
                        
                                
                                
                                        
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#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:

1
2
3
4
5


$(document).ready(function(){$('#button a').click(function(){var integer=$(this).attr('rel');$('#myslide .cover').animate({left:-425*(parseInt(integer)-1)})
$('#button a').each(function(){$(this).removeClass('active');if($(this).hasClass('button'+integer)){$(this).addClass('active')}});});});

Check out the DEMO how it comes. All Done!

Cheers!

Scroll to Top