I used jQuery and CSS to create this slideshow with a caption box that rises upon the slide image loading. Upon hover, the css transitions slowly reveal more content below. It even works, without the smooth transitions, in IE.
jQuery
<script type="text/javascript">
jQuery(function(){
jQuery('#slides').slides({
preload: true,
preloadImage: './images/loading.gif',
play: 5000,
effect: 'slide',
slideSpeed: 500,
slideEasing: 'easeInOutSine',
fadeSpeed: 1000,
crossfade: true,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-135
},100);
if (window.console && console.log) {
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
CSS
#slides {
position:absolute;
z-index:100;
}
#slides img{
width: 100%;
}
.slides_container {
width:940px;
overflow:hidden;
position:relative;
display:none;
}
.slides_container div.slide {
width:940px;
height:270px;
display:block;
}
#slides .next,#slides .prev {
position:absolute;
top:100px;
right:-24px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left: -23px;
}
.pagination {
display: none;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(../images/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
.caption {
z-index:500;
position:absolute;
bottom:-65px;
left:0;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:100%;
font-size:1.3em;
line-height:1.33;
color:#fff;
text-shadow:none;
height: 60px;
-moz-transition-duration: 4.5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: 4.5s;
-o-transition-property: all;
-o-transition-duration: 4.5s;
}
.caption:hover {
height: 120px;
-moz-transition-duration: 4.5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: 4.5s;
-o-transition-property: all;
-o-transition-duration: 4.5s;
}
.slide img{
margin-top: -110px;
-moz-transition-duration: 14.5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: 14.5s;
-o-transition-property: all;
-o-transition-duration: 14.5s;
}
.slide:hover img{
-moz-transition-duration: 14.5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: 14.5s;
-o-transition-property: all;
-o-transition-duration: 14.5s;
}
HTML
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="/" target="_blank"><img src="http://www.variablevisions.com/images/harley-ad-accessories.jpg" alt="Slide 6"></a>
<div class="caption">
<p>Slide 1</p>
<p>I now use only the iPhone for taking photos.</p>
</div>
</div>
<div class="slide">
<a href="/" target="_blank"><img src="http://www.variablevisions.com/images/flower-sun-closed.jpg" alt="Slide 6"></a>
<div class="caption">
<p>Slide 2</p>
<p>Some sample code to share.</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="./images/arrow-next.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="./images/arrow-prev.png" width="24" height="43" alt="Arrow Next"></a>
</div>
</div>
