How to Add Sliding Text on Images Using jQuery

I frequently get asked by my students how to add sliding text over images. In this lesson we will produce a very simple hover effect on an image which will result in text being shown.

You can see the before and after images below.

Hover text demo lion before image
Hover text demo lion after image

 

When we hover over the lion image the description will slide up.  When we exit the image the description will slide back down again.

STEP 1: The HTML

First, we will create the basic HTML structure.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Text Rollover Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <link href="style.css" rel="stylesheet">    
   </head>
   <body>
      <div class="rolloverContainer">
         <img src="lion.jpg" />
         <div class="content">
            <span class="title">The Lion</span>
            <span class="description">Often referred to as the 'King of the Jungle' because of its raw power and strength.</span>
         </div>
      </div>     
   </body>
</html>

Line 6: remember that you will need to include a reference to jQuery, either a local copy or from a CDN such as Google. 

Line 7: a link to our stylesheet.

Lines 10 - 16: the basic structure of the image and rollover content. The content div is inside the main rolloverContainer and will be partially hidden using css.

STEP 2: The CSS

.rolloverContainer {
   width: 300px;
   height: 300px;
   position: relative;
   overflow: hidden;	
}

.content {
   width: 280px;
   background: #666;
   opacity: 0.7;
   padding: 10px;	
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #FFF;
   position: absolute;
   top: 265px;
}

.title {
   text-transform: uppercase;
   display: block;	
   padding-bottom: 5px;
}

.description {
   font-size: 0.8em;	
}

This css should be fairly easy to follow. 

The rolloverContainer has relative positioning applied with overflow: hidden. This is how we are positioning and partially hiding the content div. 

Line 15: The content div has an absolute position.

Line 16: We move the content div 265 pixels from the top of the rolloverContainer div. You will need to adjust this number depending on your own image size.

STEP 3: The jQuery Code

We now add the jQuery code to our html page.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Text Rollover Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <link href="style.css" rel="stylesheet" type="text/css">
      <script>
         var topWhenHover = 220;
         var topWhenLeave = 265;

         $(function(){

            $('.rolloverContainer').mouseenter(function(){
               $('.content',this).animate({top:topWhenHover + 'px'})
            });

            $('.rolloverContainer').mouseleave(function(){
               $('.content',this).animate({top:topWhenLeave + 'px'})
            });

         })
      </script>     
   </head>
   <body>
      <div class="rolloverContainer">
         <img src="lion.jpg" />
         <div class="content">
            <span class="title">The Lion</span>
            <span class="description">Often referred to as the 'King of the Jungle' because of its raw power and strength.</span>
         </div>
      </div>     
   </body>
</html>


Line 9: we have declared a variable which will be used to position the content div when we hover over our image. In this case we want it to be 220px from the top.

Line 10: when we stop hovering we will position the content div 265 pixels from the top. Note that this number matches the value on line 16 of our css.

Line 14: this checks for a mouseenter over the rolloverContainer. If theis is true then we run a function

Line 15: we take the content div and animate it to 220px from the top of the rolloverContainer div.

Line 17: we detect a mouseleave and run a function.

Line 18: we reposition the content div back to its starting position.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

User Avatar

Is it possible to have more than one per page. When I try it does not work.

by Kelly J, 31-Dec-2015

User Avatar

Hi Kelly, yes the code will work fine for multiple images and rollovers. If your code is not working then check your html structure. You may have nested the second copy of the structure within the first one. If your code editor allows then click to close the main rolloverContainer div for the first element before pasting the second AFTER. Hope that helps!

by Patrick Morrow, 31-Dec-2015

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.