jQuery text slide up / slide down effect

Posted on 20 October 2009

On the Guardian newspaper website they use a jQuery text slide up / slide down effect when you hover over the images.

I've recreated the effect here but with an additional fallback for when Javascript is turned off. Instead of the animated text not appearing, it is simply shown underneath the image.

The javascript is as follows (obviously you'll need to link to the jQuery library on your page)...

$(function(){  
  $('.feature_box').showFeatureText();    
})

$.fn.showFeatureText = function() {
  return this.each(function(){    
    var box = $(this);
    var text = $('p',this);    

    text.css({ position: 'absolute', top: '57px' }).hide();

    box.hover(function(){
      text.slideDown("fast");
    },function(){
      text.slideUp("fast");
    });

  });
}

The value for the text position from the top is simply the height of the header block, it'll work without any further tweaks if you use the following html markup...

<div class="feature_box">
  <h2><a href="#">Lorem ipsum dolor <span class="sub_hdr">Sit amet consectetur</span></a></h2>
  <a href="#"><img width="250" alt="" src="/images/jquery/feature.jpg"/></a>
  <p><a href="#">Excepteur sint occaecat cupidatat non proident. Qui officia deserunt mollit anim id est laborum</a></p>
</div>

To get the transparent effect on the text that slides I have simply used a transparent png set as a background image using css.

This css should get you started...

.feature_box{
  width:250px;
  position:relative;
  margin:10px 0 20px;
}

.feature_box h2{
  background:#001f4d;
  padding:10px;
  font-size:20px;
  margin:0;
  font-weight:normal;
  font-family:arial,helvetica,sans-serif;
}

.feature_box a, .feature_box h2 a{ text-decoration:none; }
.feature_box h2 a:link, .feature_box h2 a:visited{color:#FFF;}
.feature_box a:hover{ background:none; }
.feature_box a, .feature_box img { display:block; }

.feature_box h2 span.sub_hdr{
  display:block;
  color:#035ee5;
  font-size:12px;
  margin:5px 0 0;
  font-weight:normal;
}

.feature_box p{
  overflow:hidden;
  width:100%;
  z-index:1;
  background: transparent url(/images/jquery/feature_bg.png) repeat;	
  font-family: tahoma,verdana,arial,helvetica,sans-serif;
  margin:0;
  font-size: 12px;
  margin: 0 0 10px 0;
  line-height:1.5;
}

.feature_box p a:link, .feature_box p a:visited{
  width:230px;
  color:#FFF;
  padding:10px;
}

.feature_box p a:hover{ color:#FFF; }

Articles Archive →

Comments...

• smooth and silky and also easy to use

  Anurag Katoch at 15 Apr 10 at 01:41

• Hey,

  Very cool article! Nice use of the slideDown and up :) If anyone wishes to visit a beginner tutorial for the jQuery slideup and slidedown functionality please feel free to visit: http://www.tonylea.com/2010/jquery-slideup-and-slidedown/

  Thanks

  Tony Lea at 25 Dec 10 at 19:57

• hmmm....when i implent the code on a <a href="magicalunderground.com/hoverup">test page</a> the WHOLE image slides down...not just the text box.

  thoughts?

  Paul at 09 Jan 11 at 19:30

• thats http://magicalunderground.com/hoverup/

  Paul at 09 Jan 11 at 19:31

• nice and easy but it's not work with ie 6 and direction:rtl
  but thank you anyway

  regards

  gamezat at 09 Apr 11 at 13:09

• Does anybody know how to create a pure jquery text slider without images?

  lift at 15 Apr 11 at 03:42

• very nice idea with the transparent background png. I tried it with two divs and it's pain!

  teller at 28 Apr 11 at 09:59

• You have a great plugin. Thanks!

  Web Developer at 18 May 11 at 03:59

• I just changed position from absolute to relative to make it display without a custom height. Of course the width of the parent element needs to constrain to the column to display as expected. Anyways, works great, saves time, THANK YOU VERY MUCH.

  Ivan Alfaro at 23 Sep 11 at 01:15

• Thanks for this great effects. I will implement this i my new website.

  Webdesign Arnsberg at 22 Nov 11 at 09:59