Question

I’m looking to create a group of images in a collage format (multiple image sizes).

Once created, they will all line up via Isotope (like this).

Then, once they have lined up, upon hover I want them to move the others out of the way (resizing them to compensate for the hovered images larger size) and display more information.

Right now I’m EXTREMELY close, but the Isotope script is allowing it to resize the container rather than resize the images.

In summary, I’m stumped on resizing the images.

An example of what I am looking for.

And here is my JSFiddle of what I have so far.

Thanks for any and all help!

Answer 1

As far as resizing other images to accommodate for the animating main image, I don’t think isotope supports this. You would probably have to write some custom jquery animation.

Something with the logic:
Animate vertical, find all elements to the top and bottom of the image and shrink them the same amount of pixels as you are growing the height
Then animate horizontal, find all element to the left and right of the image and shrink them the same amount of pixels as you are growing the width.

One thing you could do to restrict the resizing of the container is to add this line to your isotope option:

resizesContainer : false

Hope this helps