Two images, split into four sections. When you mouse over any of the sections, the image expands to fill the container. Kinda pretty, and not that complicated – jQuery adds a CSS class on mouseover, CSS handles the animation, and a bit of extra jQuery solves some z-index problems.
So everything works great!
However I’ve run into a problem when trying to make this responsive (so that the image will fill the width of the viewport).
The basic layout works just fine, but the problem is with the background-size: http://codepen.io/blimpage/full/hKkfu
As you can see, the background changes size during the size transition.
This is because in its normal state, the background-size is set to 200% (since the box is only half the width of the image), and in its active state, the background-size is set to 100%.
The only issue with that is that the background-size percentage and the container width don’t properly scale together, making the image grow and shrink during the transition, rather than staying the same size.
(I’m probably over-explaining this – you can see what’s happening just by looking at it.)
My first thought for a solution is to write a custom easing function for the background-size transition… but I wouldn’t have a clue where to even start on that.
So I’m looking for either an alternate solution, or a mathematician! Any ideas?