css3 animate anchor when active

I've got a set of thumbnails that i'd like to shrink when clicked on (active). I thought that reducing their size by a small amount (.2ems) and increasing the margin around them (.1em all around) would do it, but somehow I'm still getting a bunch of movement from their sisters.

here's a jsfiddle to demonstrate http://jsfiddle.net/danielredwood/EWCAJ/1/

I'd love to avoid webkit based开发者_如何学Python animations :)

Thanks!

How about using a transform, then the space the element takes up won't be affected at all:

.thumbnail {
    background:#ccc;
    width:18.75em;
    height:11.25em;
    margin:1.25em 0 0 1.25em;
    float:left;
    -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.thumbnail:active {
    -moz-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    -o-transform: scale(0.95);
    transform: scale(0.98);
}