Plugin Directory

Test out the new Plugin Directory and let us know what you think.
!This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

CSS Thumbnail Sprites

Simple plugin for creating sliding door CSS sprites out of uploaded images with a range of image effects.

How do I access the sprite using php?

Each sprite is registered as a custom image size. So to access that image you simply need to specify the image identifier you used when registering your sprite; Access image like so eg: 'wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'image-identifier');`

How do I animate the sprite?

You can use either JavaScript or CSS to animate your sprite.

To begin you will need to set the containing block element of your sprite to the width of your sprite and 1/2 of its height. Something like the following;


.css-thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;

.css-thumb img {
    position: absolute;
    top: 0;
    left: 0;

Once you have your sprites within a CSS container, you need to animate the sprite, or simply change it's position. The actual positions and dimensions will depend on what you have set within the plugin.

Position change with CSS:

.css-thumb img:hover {
    top: -150px;

Animating with Javascript (jQuery):

$('#container .css-thumb').on({
    mouseenter: function(event) {
        $('img', this).animate({'margin-top': -($(this).height()) },200);

    mouseleave: function () {
        $('img', this).animate({'margin-top': '0' }, 500);

Can I have multiple sprite sizes and effects?

Yes, as many as you want.

Requires: 3.0.1 or higher
Compatible up to: 3.5.2
Last Updated: 4 years ago
Active Installs: 200+


5 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.