Text Overlay Using jCapSlide

This text overlay from jCapSlide code. For source, please visit jCapSlide a jQuery Image Caption Plugin

Sport

Gliding movement Extreme Sports

Gliding is a recreational activity and competitive sport in which pilots fly
unpowered aircraft known as gliders (sailplanes) using rising air
to gain altitude or speed. The word soaring is also used for the sport
image: Gliding

HTML Code

<div id="capslide_img_cont6" class="ic_container">
<img src=".../image.jpg" width="600" height="424" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3> Title</h3>
<p class="ic_text">
Descriptions
</p>
</div>
</div>

CSS Code

<style type="text/css">
<!--

.ic_container{
vertical-align:baseline;
margin:10px;
position:relative;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-box-shadow: 0 1px 3px #888;
-webkit-box-shadow: 0 1px 3px #888;*/
}
.overlay{
opacity:0.3;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
position:absolute;
opacity:0.6;
overflow:hidden;
margin:0px;
padding:0px;
left:0px;
right:0px;
cursor:default;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
text-transform:uppercase;
font-size:11px;
letter-spacing:3px;
padding:5px;
margin:0px;
}
.ic_caption h3{
padding:0px 5px 5px 5px;
margin:0px;
font-size:18px;
}
.ic_text{
padding:5px;
margin:0px;
text-align:justify;
font-size:11px;

}

-->

</style>

jQuery Code

<script type="text/javascript">
(function($) {
$.fn.capslide = function(options) {
var opts = $.extend({}, $.fn.capslide.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

if(!o.showcaption) $this.find('.ic_caption').css('display','none');
else $this.find('.ic_text').css('display','none');

var _img = $this.find('img:first');
var w = _img.css('width');
var h = _img.css('height');
$('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
$('.overlay',$this).css('background-color',o.overlay_bgcolor);
$this.css({'width':w , 'height':h, 'border':o.border});
$this.hover(
function () {
if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
$('.overlay',$(this)).show();
else
$('.overlay',$(this)).fadeIn();
if(!o.showcaption)
$(this).find('.ic_caption').slideDown(500);
else
$('.ic_text',$(this)).slideDown(500);
},
function () {
if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
$('.overlay',$(this)).hide();
else
$('.overlay',$(this)).fadeOut();
if(!o.showcaption)
$(this).find('.ic_caption').slideUp(200);
else
$('.ic_text',$(this)).slideUp(200);
}
);
});
};
$.fn.capslide.defaults = {
caption_color : 'white',
caption_bgcolor : 'black',
overlay_bgcolor : 'blue',
border : '1px solid #fff',
showcaption : true
};
})(jQuery);
</script>

JavaScript Code

<script type="text/javascript">
$(function() {
$("#capslide_img_cont6").capslide({
caption_color : 'black',
caption_bgcolor : 'white',
overlay_bgcolor : '#832EA5',
border : '10px solid #ccc',
showcaption : true
});
});
</script>