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.
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');
});
});
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.