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.

⚙ Live Demo

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.

1. <style style=
   
   "text/css"
   
   >
   
2. .image_box
   
   {
   
3. float
   
   :
   
   left
   
   ;
   
4. margin
   
   :
   
   20px
   
   ;
   
5. position
   
   :
   
   relative
   
   ;
   
6. color
   
   :
   
   #000
   
   ;
   
7. }
   
8. .image_box
   
   .image_text
   
   {
   
9. display
   
   :
   
   none
   
   ;
   
10. position
    
    :
    
    absolute
    
    ;
    
11. bottom
    
    :
    
    0px
    
    ;
    
12. padding
    
    :
    
    5px
    
    ;
    
13. background
    
    :
    
    cornflowerblue
    
    ;
    
14. width
    
    :
    
    150px
    
    ;
    
15. opacity
    
    :
    
    0.8
    
    ;
    
16. }
    
17. </style>
    

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.

1. <
   
   script>
   
2. $(
   
   document)
   
   .ready
   
   (
   
   function
   
   (
   
   )
   
   {
   
3. $(
   
   '.image_box'
   
   )
   
   .hover
   
   (
   
   function
   
   (
   
   )
   
   {
   
4. $(
   
   '.image_text'
   
   ,
   
   this
   
   )
   
   .slideToggle
   
   (
   
   'moderate'
   
   )
   
   ;
   
5. }
   
   ,
   
   function
   
   (
   
   )
   
   {
   
6. $(
   
   '.image_text'
   
   ,
   
   this
   
   )
   
   .slideToggle
   
   (
   
   'slow'
   
   )
   
   ;
   
7. }
   
   )
   
   ;
   
8. }
   
   )
   
   ;
   
9. </
   
   script>
   

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.

1. <h1
   
   >
   
2. Mouse over the Image to view the effect.
   
3. </
   
   h1
   
   >
   
4. 
   
5. <div
   
   class
   
   =
   
   "image_box"
   
   >
   
6. <img
   
   src
   
   =
   
   "image/5s.jpg"
   
   /
   
   >
   
7. <div
   
   class
   
   =
   
   "image_text"
   
   >
   
8. <h1
   
   >
   
   Image 1</
   
   h1
   
   >
   
9. <h3
   
   style
   
   =
   
   "color:white;"
   
   >
   
   Iphone 5s</
   
   h3
   
   >
   
10. </
    
    div
    
    >
    
11. </
    
    div
    
    >
    
12. <div
    
    class
    
    =
    
    "image_box"
    
    >
    
13. <img
    
    src
    
    =
    
    "image/6.jpg"
    
    /
    
    >
    
14. <div
    
    class
    
    =
    
    "image_text"
    
    >
    
15. <h1
    
    >
    
    Image 2</
    
    h1
    
    >
    
16. <h3
    
    style
    
    =
    
    "color:white;"
    
    >
    
    Iphone 6</
    
    h3
    
    >
    
17. </
    
    div
    
    >
    
18. </
    
    div
    
    >
    
19. <div
    
    class
    
    =
    
    "image_box"
    
    >
    
20. <img
    
    src
    
    =
    
    "image/6s.jpg"
    
    /
    
    >
    
21. <div
    
    class
    
    =
    
    "image_text"
    
    >
    
22. <h1
    
    >
    
    Image 3</
    
    h1
    
    >
    
23. <h3
    
    style
    
    =
    
    "color:white;"
    
    >
    
    Iphone 6s</
    
    h3
    
    >
    
24. </
    
    div
    
    >
    
25. </
    
    div
    
    >
    

⚙ Live Demo

Output



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

Download