Vertical Column Image Expanding on Hover Animation

Image: Vertical Column Image Expanding on Hover Animation GIF

Check out 4 different image gallery hover animation effect using Swiper.js by Khanh. In the 1st vertical accordion like gallery when you hover over the image has a smooth slide pushing out the images around it to the side. In the second one the image zooms a bit out pushing the other ones to the side and has a background shadow giving it a bit of depth. In the 3rd one there is a bit of shake as the image settles into the expanded view. The 4th one is similar to the 1st one but is a bit smoother and has a shadow effect as well. You can scroll these all 4 different style.

If you are having trouble with the pen, try the archived copy on GitHub

Image Gallery Accordion Snippet

See the Pen Image Accordions – Date 9 (24 days of animation) by januaryofmine (@januaryofmine) on CodePen.0

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.