Vertical Column Image Expanding on Hover Animation

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
accordion tabs hover animation image gallery image slider scroll animation shadow swiper.js zoom
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.