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 has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…

Turning Rejection into Fuel: Your Guide to Creative Resilience

Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is…

20 Best New Websites, August 2024

The overarching theme in this selection is simplicity. Minimalism never really goes out of fashion and with good…

Free AI-Website Builder, Scene, Helps With the Worst Part of Site Design

AI website design platform, Scene As we’ve been hearing constantly for the last couple of years, AI will soon replace…