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, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…