How to make an animated thumbnail

Ben Moss.
December 10, 2012
How to make an animated thumbnail.

ThumbnailThumbnails are one of the purest pieces of usability the digital age has created. In essence a thumbnail is a preview, a promise of what you'll see if you click the link. A small glimpse with less data, faster to load and less greedy for screen real estate than the full-sized asset. They're ideal for images, but what about video?

Well, by extending a technique we already use for button states, we can create amazing animated thumbnails with basic CSS and a little jQuery.

How CSS sprites work

Nowadays, download speeds aren't such a problem for web developers. Of course, small file sizes are still desirable, but the real performance hit on most sites is the number of HTTP requests. Each time your site loads an asset, the browser makes an HTTP request which is sent, processed and then returned. Check your console, you'll see that much of the delay on your site is nothing to do with image size, it's spent waiting for a server response.

The solution is the CSS sprite technique; stitching multiple images into a single image file and then selectively displaying different parts of that image using CSS.

Traditionally, for any button that we can't create with basic CSS styles, we'd create three states; an off, an over and a down:

.button{
background:url('off-state.png');
}
.button:hover{
background:url('over-state.png');
}
.button:active{
background:url('down-state.png');
}

This would lead to three images being downloaded from the server and generate three HTTP requests.

Building this as a CSS sprite, we save all three images next to each other in a single file (so that instead of having three 200px wide images we have one 600px wide image) and change the position of the image using CSS's background-position property:

.button{
display:block;
width:200px;
height:83px;
background:url('button-states.jpg');
}
.button:hover{
background-position:-200px;
}
.button:active{
background-position:-400px;
}

Think of the element as a window, through which you view the image. You can move the image around, but the window stays in the same position. Provided that you ensure that the element is the same size as the portion of the image you want to display the effect is seamless:

Building an animated thumbnail

The limitation of the CSS sprite technique above isn't the image, it's the number of different triggers we can use. We only have off (the default state), over and down.

However, by plugging in a little jQuery we can use the position of the cursor to determine as many different trigger points as we like — or more accurately, as many different cursor positions as we can have on the screen:

The first thing we need to do is to stitch together some images. I'm going to be linking to this beautiful video of Western Norway at sunrise by Fuglefjellet, so I've screen-grabbed 10 key frames from a section of that video that I like and stitched them together into a single image using Photoshop.

Image composit

Now that the image is ready, the second thing we need to do is create a simple HTML file with a link to the video we're creating the thumbnail for:

Western Norway at sunrise

Next, we need to import jQuery in the head of the page:


Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link:

$(document).ready(function() {
$('#preview')
.css('display', 'block')
.css('width', 500)
.css('height', 203)
.css('background', 'url("our-image.jpg") no-repeat');
});

Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth.

Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element.

Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time.

We subtract the resulting value from 0 so that all possible values are negative.

Then we apply the background-position with CSS:

.mousemove(function(e) {
var elementWidth = 500;
var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
$(this).css('background-position', '-' + bgPosition + 'px 0px');
});

The full script looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#preview')
.css('display', 'block')
.css('width', 500)
.css('height', 203)
.css('background', 'url("landscape.jpg") no-repeat')
.mousemove(function(e) {
var elementWidth = 500;
var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
$(this).css('background-position', bgPosition + 'px 0px');
});
});
</script>
</head>
<body>
<a href="https://vimeo.com/8736190" id="preview">Western Norway at sunrise</a>
</body>
</html>

Conclusion

There are a couple of things to consider: firstly, it would be possible to set up a thumbnail with hundreds of 'frames', but whilst that will lead to very smooth animation, it will also take a long time to load; secondly, the mouse position detection simply isn't going to work on a touchscreen device, so whilst this technique won't actually harm usability on a mobile device you aren't gaining anything either.

The purpose of a thumbnail is to present the user with more information about what lies at the other end of a link, and when the resource you're linking to is a video, a single image is often not enough information. Extending the CSS sprite technique is a simple, effective way to preview more than a single frame.

How do you preview video in thumbnails? Do you use more than a single image? Let us know in the comments.

Ben Moss

Ben Moss is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Read Next

24 Best Creative Portfolio Websites in 2023

For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…

15 Best New Fonts, September 2023

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…

Weekly Design News #1

Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…

The 20 Most Controversial Logos of All Time (Ranked)

When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…

LimeWire AI Studio Generative Art App

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

20 Best New Websites, September 2023

Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…

The Dangers of Deceptive Design Patterns (And How to Avoid Them)

As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…

10 Best Ecommerce WordPress Themes in 2023 [September update]

You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…

5 Marketing Tools Every Designer Needs

Yes, designers do need marketing tools. From freelance graphic designers who need to land more work to designers who…

Exciting New Tools For Designers, September 2023

At the end of another summer, we are all getting ready to knuckle down for some serious work in the fall. But we want…

Elon Musk calls LinkedIn ‘Cringe’—Announces Competitor

Elon Musk recently announced his intentions to create a direct competitor to LinkedIn. Musk’s grand plan is to make his…

Everything You Need to Know to Embrace the Y2K Design Trend

The turn of the millennium was a major cultural shift, and the Y2K aesthetic emerged as a visualization of what the…