CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
edo
edo

Reputation: 1879

Bring image in front of slick carousel

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.

enter image description here

What I want:

enter image description here

Upvotes: 0

Views: 3143

Answers (3)

Seth Griffin
Seth Griffin

Reputation: 75

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 }

Upvotes: 0

ffork
ffork

Reputation: 348

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.

Upvotes: 2

Haim Houri
Haim Houri

Reputation: 261

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.

Upvotes: 5

Related Questions