Take the 2-minute tour ×

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 animations :)


share|improve this question

1 Answer 1

up vote 0 down vote accepted

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

.thumbnail {
    margin:1.25em 0 0 1.25em;
    -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);
share|improve this answer

Your Answer


