Animated hovering in slideshow

[bmcode]

Here is the pen I’m working on: https://codepen.io/bmcdesign/pen/YzNReRd

First off, I’m not sure why, but Codepen isn’t saving my external scripts. I enter them and save them, but when I reopen the page, they are gone.

So, in the pen settings please enter for CSS:
//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

and JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js

Now, the problem is that when I hover on a slide, I want it to slide up. This is working, but I want the entire slide to raise. Right now it is cutting off the top of the image, as if it’s in a container.

Does anyone know how I can solve this? If you need more details please let me know. Thanks

[PaulOB]

@bmcode

as if it’s in a container.

The images are in a container because that’s how a slider works. It uses overflow hidden to hide all the slides as they stretch thousands of pixels to the right.

You won’t be able to make a slide pop out of its container.

You could add some padding top to the top of the container to allow the image to move a little but I’m not really sure what effect you are going for,

.slick-list{padding-top:25px}

That’s assuming what I’m seeing in the codepen is what you expected?

[bmcode]

The padding solution worked perfectly.

Thanks a lot!