Jump to content


Expand image width on hover

Recommended Posts

Hey guys, 

Im trying to make an 2 image gallery/accordion in which the the hovered image expands and and the non hovered reduces in width. I've created a minimal demo of my approach, but i'm getting a "jump" when the mouse goes from one image to the other. I'm assuming this is because of the "fromTo". Wasn't sure how to go about it, if i needed to clearProps?


Simple Criteria:
- When the user mouse leaves completely, both images should return to their initial width (50%).

- If the user moves from one image to the other, the widths should adjust smoothly.


Sorry if this has already been asked. Any help to smooth out the effect would be greatly appreciated. Thanks a bunch :)


See the Pen WNGmNgZ by Nysh (@Nysh) on CodePen

Link to comment
Share on other sites

yooo~ that's so slick~ Thank you  @mikel!

That approach is so much better and cleaner. I applied it to my original width animation and now it works perfectly. Thanks again legend :)!!

here's the updated codepen~

See the Pen PoGLNWX by Nysh (@Nysh) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.