jQuery Sliding Text on Images

In this tutorial, we are going to display text on image with a sliding box on the mouse-over event. In the previous tutorial, we have seen sliding images using jQuery effects.

In this example, we are using jQuery and CSS to show the sliding text on images. We are using the jQuery slideToggle() function to create the toggle effect on hover image frame.

View Demo

Sliding Text HTML

This code shows image frame with sliding text. Sliding text DIV is initially hidden and shown with jQuery toggle effect on the mouse over event of image frame.

<div class="image-frame">
	<img src="4.jpg"/>
	<div class="image-caption">
	  <h2>Slide1</h2>
	  Mouse over Slide 1 to view the caption.
	</div>
</div>
<div class="image-frame">
	<img src="2.jpg"/>
	<div class="image-caption">
	  <h2>Slide2</h2>
	  Mouse over Slide 2 to view the caption.
	</div>
</div>

Sliding Box CSS

These styles are used to position jQuery sliding box on images.

.image-frame {
	float: left;
	position: relative;
	margin: 5px;
	color: #333;
}
.image-frame .image-caption {
	display: none;
	opacity: 0.8;
	background:#cae5c1;
	width: 290px;
	position: absolute;
	bottom: 0px;
	padding: 5px;
}

jQuery Slide Toggle

This script toggle image info using a sliding box on hover.

$(document).ready(function() {
    $('.image-frame').hover(function(){
		$('.image-caption',this).slideToggle('slow');
	}, function(){
		$('.image-caption',this).slideToggle('slow');
    });
});

View DemoDownload