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 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 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">
	  Mouse over Slide 1 to view the caption.
<div class="image-frame">
	<img src="2.jpg"/>
	<div class="image-caption">
	  Mouse over Slide 2 to view the caption.

Sliding Box CSS

This 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;
	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() {
	}, function(){

View DemoDownload

This jQuery code tutorial was published on August 4, 2015.

↑ Back to Top