Sliding Text on Images with Bootstrap Templates

In this tutorial, we are going to learn on How To Create Sliding Text On Images. In this source code, we are going to display the text on its corresponding image with a background color after we hover the image. In the example source code below, by using CSS and jQuery to appear the text effect on our images. Using jQuery slideToggle() we produce effect after we hover into the image. You can try the Live Demo of this tutorial. Kindly click the button below.

Source Code:

CSS

This simple source code preparation for the background of the text sliding to the images. Kindly copy and paste to the HEAD tag of your simple web page.

slideToggle()

This is the script to have this kind of effect, with the function of slideToggle(). This script helps us to have the effect when the cursor hovers over the images the text with the background will show automatically in slow motion.

HTML

This is the codes where you can find the image with sliding text effect. But the effect is partially covered and it will be shown after we hover into the image. Kindly copy and paste this simple markup to your BODY tag of your web page.

Mouse over the Image to view the effect.

Image 1

Iphone 5s

Image 2

Iphone 6

Image 3

Iphone 6s

Output

Note: For the effect, you can edit the CSS file after download the source code.