background-size with background-position doesn't scale the position?

Question

I\'ve a sprite of 62 images of 91 * 91px, which makes the whole thing 91 * 5642 px. They\'re displayed in sort of a dynamic grid that grows and shrinks depending on user/pointer

Answer 1

In your hover state, edit your background position according to the scale ratio

a:hover {
    width: 120px;
    height: 120px;
    background-position: 0 -240px; /* -182px * 1.3186... */
}

FIDDLE

---

Just for the record: in your question you mentioned that scale is slow. I tried using scale and I didn't see slow transtions:

a:hover {
    transform: scale(1.3);
    transform-origin: 0 0;
    transition: all .5s;
}

FIDDLE