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:

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
	<div id="button">
		 <a class="button1 active" rel="1" href="#"></a>
		 <a class="button2" rel="2" href="#"></a>
		 <a class="button3" rel="3" href="#"></a>
	</div> <!-- end of div button-->
 
	<div class="clear"></div>
 
	<div id="myslide">
		<div class="cover">
 
			<div class="mystuff">
				<img src='wolf.jpg' />
				<div class='description'>
					<p class='description_content'>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. </p>
				</div>
			</div>
 
			<div class="mystuff">
				<img src='wolf1.jpg' />
				<div class='description'>
					<p class='description_content'>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. </p>
				</div>
			</div>
 
			<div class="mystuff">
				<img src='wolf2.jpg' />
				<div class='description'>
					<p class='description_content'>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. </p>
				</div>
			</div>
 
		</div> <!-- end of div cover -->
	</div>  <!-- end of div myslide -->

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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(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')}});});});
</script>

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

Recently Published

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...

»

How to Promote Your Business by Collecting Instagram Followers – Part 2

Promoting business is not an easy task these days with so many ...

»

Using Instagram to Optimize Your Business – Unfolding the Tricks – Part 1

Instagram is one of the most popular social networking communities ...

»

6 Mobile UX Design Techniques that work

In software development, be it a mobile app or a website, creating ...

»

Importance of website design in online branding

“A brand for a company is like a reputation for a person. You earn ...