How can I create a hop up image effect with Swiper?

Viewed 27

Currently, I'm browsing some pages and I found that there's a page where the design is very pleasing to me. So I'm trying to replicate it, but unfortunately that I can't figure it out due to my lack of CSS skills.

So here's how that page work:

Whenever the class is active, it'll hop up a bit (the page I'm looking at is using Swiper, too!) Hop up

But however, the Hop-up image will go out of the box of Swiper Swiper box

And what I'm doing right now, there's a box just like that page, but the image or anything else if it's larger than the current box, it'll be cut. I can't make it go outside of the Swiper's box.

Here's how I'm currently doing it, I made a quick dataSample and then mapped it, get the current slide to have the active class, and then CSS it. Any help is appreciated, many thanks. I've left comment on what I'm doing in the CSS at CodeSandbox.

Code: CodeSandbox - Trying to create Hop-up image using Swiper

0 Answers
Related