Animated hovering in slideshow

Here is the pen I’m working on:

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:

and JavaScript:

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 :slight_smile:

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,


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

1 Like

The padding solution worked perfectly.

Thanks a lot! :slight_smile: