WordPress.org

Ready to get started?Download WordPress

Plugin Directory

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:

.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: 2012-12-19
Downloads: 3,909

Ratings

5 stars
5 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

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