Bring image in front of slick carousel

Question

I created a carousel/slider of images with slick and now I want to increase the size of an image on hover.

When I try to do that the image is cut-off by the slick container. How can I bring the image to front so I can see the whole thing? I tried using z-index but it doesn't work.

JSFiddle of my code. Here's a screenshot with the problematic hover behaviour.

What I want:

Answer 1

Overflow being hidden is what's preventing the scaled image from showing entirely. But you can't simply show overflow as this will cause the hidden slides to show.

What you need to do is clone the scaled image outside of the carousel. Here is a working JSFiddle

$(".zoom-it").mouseenter(function(){
    var $this = $(this);
    var position = $this.offset();
    $this.clone()
        .addClass('scaled')
        .insertAfter($(".my-slider"))
        .css({left: position.left, top: position.top});
});

$(document).on('mouseleave', ".zoom-it.scaled", function(){
    $(this).remove();
});

With updated CSS

.zoom-it.scaled {
    transform: scale(2);
    position: absolute;
}

This will clone the hovered image, placing a scaled version on top and removing it when the mouse leaves it.

Answer 2

The problem is that slick adding overflow:hidden to the slick-slider class that contains your images.

you can override this by adding this to your css:

.my-slider > div {
  overflow:visible;
}

EDIT:

my bad, you should do

.my-slider > div {
  overflow-y:visible;
}

so the hidden images will stay hidden.

Answer 3

Another solution that produces the desired functionality is to add padding to the div wrapper slick adds to your outermost carousel container. Just fixed this after hours of struggling with it. Hope this helps someone.

.carousel-class-name > div { padding: 20px 0px 20px 0px }