Ask JW: How do I Create the Image/Description Slide Effect?

It’s been a few weeks since the last entry in this series. Today’s Q and A comes courtesy of Alex Sandings.

The Question

Hi, Jeffrey! I’ve seen a few themes on this site that have a cool effect where you hover over an image, it then slides out of view, and a description is revealed. Can you demonstrate how to replicate this effect?

The Solution

Hey Alex! I think I know what you’re talking about. I created a quick and dirty mock-up of what I think you’re referring to. Does this fit the bill?

Demo

If so, it’s actually quite easy. Let’s get started.

Step 1: Create the Mark-up

Create a new HTML document and add your standard beginning HTML tags (html, body, etc.). Next, within the body tag, we need to create a wrapping div called “teaser-wrap.” 

<body>
 
<div id="teaser-wrap">
 
</div><!--end teaser-wrap-->
</body>

Now, we also need to create a wrapping for each image and description. For the demo, I added around six; however, for the sake of simplicity, I’ll just create one. I recommend that you go ahead and duplicate these X number of times. 

 
<div id="teaser-wrap">
  <div class="teaser">
 
  </div><!--end teaser-->
</div><!--end teaser-wrap-->

Step 2: Add the Details

Now that we have our teaser div, let’s insert the image, a heading tag, description, and a “Read More…” link. This is just for the example. Feel free to rearrange how you wish! 

<div class="teaser">
   <img src="image.jpg" alt="photo" />
   <h3>Envato's Birthday</h3>
   <p>Just a preview goes here. </p>
   <p><a href="#">Read More...</a>
</div><!--end teaser-->

Note: If you’d like six images/description, duplicate this block six times.

No CSS Applied

Step 3: Quick CSS

As you can see in the image above, the text is underneath the image. However, we want it to be seemingly behind the image. How can we accomplish this effect? Quite simply, actually. The answer is with absolute positioning.

Create a new stylesheet, reference it within your head tags, and insert the following styles. 

.teaser {
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
 
.teaser img {
	position: absolute;
	top: 0;
	left: 0;
}
 
#teaser-wrap .teaser {
	float: left;
	margin: 1em;
}

Notice how we’ve set our .teaser div equal to the exact width and height dimensions of our images. We also set a new positioning context, because the image will need to be absolutely positioned in the top-left corner of the div. This will take the image out of the flow of the document, and allow all of the text below to jump up!

Finally, I’m also floating all of the teaser divs to the left and adding a bit of margins to provide some spacing. The page should now look like so:

CSS Applied

Step 4: Simple jQuery

Now for the code; don’t worry, it’s basic. First, be sure to reference jQuery at the bottom of your page, just before the closing body tag. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

We need to listen for when the user hovers over the teaser div. When they do, we need to tell the image within this div to slide to the left (the same value as the image’s width) — and when the user hovers out, we do the opposite. 

$('.teaser').hover(function() {
	  // over
 
	$(this).children('img').stop().animate({
		left : '-200px'
	}, 500);
 
}, 
 
function() {
  // out	
 
	$(this).children('img').stop().animate({
		left : '0'
	}, 500);
});

Wait – What is that “Stop()” Function?

Try removing them, and then reload your page. Next, mouse over the images really quickly. Notice how the effect keeps occurring? We don’t want that. “Stop()” simply means – stop any animations and then begin again.

What if I Don’t Know the Image’s Width?

If you need to determine this value dynamically, you can instead use the “outerWidth()” function. This will return the value of the image’s width plus margins and padding.

Why Don’t We Just Apply the Hover Function Directly to the Images, Rather than the Containing Teaser Div?

We can’t do it that way. To prove it, just try. Once the image slides away from your mouse, it would immediately close again!

Complete

Complete

So there you have it. A neat effect that’s a cinch to replicate. Go ahead and add it to your template if you’d like!