jQuery Sliding Text on Images

by Vincy. Last modified on July 12th, 2022.

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">
	  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

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;
	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

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page