ITT #5: Transparent Overlay with Slide-Out Description

jQuery + CSS to Add a Cool Entry Preview to Your Site

I'm going to try something a little different this week and talk about CSS. I'm working on a client project that needed to overlay a PNG over the top of various thumbnails in order to make the thumbnails sit in nicely with the design. I'd never done anything like this before, so I thought it might be worth sharing.

If you're deeply offended that I've strayed away from programming-related posts, let me know in the comments, but don't worry! I added some jQuery in for good measure!

View the Demo | Download the Files

The Markup

I'm a firm believer in using as few HTML elements and classes as possible. I also really hate seeing empty elements that only exist to have styles applied to them, so I try to make sure that every element I use makes sense in an unstyled document.

For this example, we'll be creating previews of two different blog entries. To easily display all the information necessary to preview the entries, we'll start with a <div> to be a wrapper for all the entries, then create a link for each entry that contains an image tag, plus a span with information about the entry (the title plus a brief description). Here's what we end up with:

<div id="wrapper">
	<a href="#" class="overlay">
		<img src="images/blogimage.jpg" alt="Image for Blog 01" />
		<span>
			<strong>Blog Post Number One</strong>
			<em>This would be the short description of 
			the entry, used to entice a user to click through 
			and read the rest...</em>
		</span>
	</a>

	<a href="#" class="overlay alt">
		<img src="images/blogimage2.jpg" alt="Image for Blog 02" />
		<span>
			<strong>Blog Post Number Two</strong>
			<em>This is another description for the 
			second blog post. Hopefully everyone who sees 
			this will want to continue reading...</em>
		</span>
	</a>
</div>

No wasted classes or extra elements, just friendly, descriptive XHTML.

View Step 1

The CSS

The first thing we need to do to style our thumbnails is to reset all the properties of the elements we'll be using. To avoid some of the weird issues that can accompany inline elements, we'll set each element's display property to block, as well as setting the margin and padding to zero.

div, a, span, strong, em, img {
  display:block;
  margin:0;
  padding:0;
}

Next, we want to set the wrapper up to display centered and at the width of our thumbnails. While we're at it, let's define styles for the "overlay" class, which should be the height and width of the thumbnails as well. Because we're going to be moving text around, we'll also set the overflow property to hidden. Then, to get rid of the underline that shows up under links by default, we set the text-decoration property to none. The image will also have a border on it due to the <a> tag, so we reset that as well.

#wrapper {
	width:140px;
	margin:0 auto;
}
.overlay {
	overflow:hidden;
	position:relative;
	width:140px;
	height:140px;
	text-decoration:none;
}
	.overlay img {
		border:0;
	}

To get the transparent overlay to sit over the top of the thumbnail, we need to set its position to absolute and align it to the top left of the document. The PNG itself is set as the background image of the span; to make sure it's visible over the top of the image, we add a z-index value of 2000. Also, I added a color property to fit the text into the color scheme I chose for the demo (this is optional -- there are several optional CSS properties I've used, which I've marked in the CSS).

	.overlay span {
		position:absolute;
		top:0;
		left:0;
		width:140px;
		height:140px;
		background:url('../images/overlay.png') top left no-repeat;
		z-index:2000;

		/* Begin optional properties */

			color:#333;

		/* End optional properties */
	}

To control the text, we're going to push the <strong> and <em> tags over 140px (out of the visible area of the "overlay" class) and apply some optional formatting to make them look nice when they're revealed.

		.overlay strong {
			position:relative;
			left:140px;
			width:196px;

			/* Begin optional properties */

				margin:14px 2px 4px;
				padding:0 0 1px;
				border-bottom:1px dotted #DDD;

			/* End optional properties */
		}
		.overlay em {
			position:relative;
			left:140px;
			width:192px;

			/* Begin optional properties */

				margin:0 4px;
				font-style:normal;
				font-size:80%;

			/* End optional properties */
		}

As a last touch, we want to be able to switch up the overlay to add a little variety to our previews. To do this, we'll define another class called "alt" that will change the background image of the span it encloses. We can then add this class to the <a> tag right along with the "overlay" class (i.e. class="overlay alt") to change the PNG that's laid over the top of the thumbnail.

	.alt span {
		background-image:url('../images/overlay2.png');
	}

With all these rules in place, we should have a nicely styled set of two thumbnails with different overlays. The text isn't visible yet, but we'll get to that in the next step.

View Step 2

Adding jQuery Effects

To show the text for our entries, we need to add a little jQuery. Keep in mind that if JavaScript is disabled, the user can still click on the link; they just won't get the description.

In an attempt to make the entry previews really eye-catching, we'll animate a "sliding" preview when a user hovers over the thumbnail. We'll accomplish this using jQuery's handy-dandy hover() and animate() functions.

$(document).ready(function() {
	$('.overlay').hover(function() {
		$(this).animate({
			width: '340px'
		});
	}, function() {
		$(this).animate({
			width: '140px'
		});
	});
});

And that's it! Make sure you've included the latest build of jQuery at the bottom of your page, right before the script above and the </body> tag.

View Step 3

Finishing Touches

If you've ever used PNGs in a layout, you've probably dealt with the gross way that IE6 handles them. To circumvent this with our entries, we'll have to employ some flavor of PNG fix. I chose to use DD_belatedPNG, as it's really easy to use and doesn't require a blank GIF image to function.

I had luck with this code in FF3, Opera 9.51, Safari 3.2.1, and IE7. IE6 works, but it has some quirks. I chose not to worry about it because, really, it works well enough, and I'm getting a little closer every day to dropping support for IE6 altogether.

View the Demo | Download the Files

I'd love to hear your thoughts in the comments!

Posted Mar 03, 2009 by Jason Lengstorf.
This entry is filed under instant tip tuesday, jquery, css, and images.