Overflow at the bottom

[ADDISON74]

I have an issue with this excellent carousel, actually with overflow option at the bottom. My list items have a hidden part which becomes visible when you move your mouse on them. By default owl carousel has overflow: hidden and moving the mouse on an item in the list item won't show the hidden part. Deleting overflow I can see the hidden part, but left and right items become visible. If anyone had this issue I appreciate for a solution.

Here is default behavior (overflow: hidden)

Here is what I need but without seeing left and right items (overflow: none)

[keefyhub]

What is setting the height of the carousel? You could let the height be as big as it needs to be, then use opacity to hide the bottom half of the slide.

[ADDISON74]

<ul> class="owl-carousel" = 1170px x 404px (including navigation part)

<div> class = "owl-stage-outer" = 1170px x 358px (without navigation part)

<div> class = "owl-item" = 270px x 358px

<div> class = "wrapper-hover" = 270px x 328px (the area for reacting to mouse hover, it has a minus 30px from owl-item because a padding-bottom)

<div> class = "wrapper-hover-hidden" = 210px x 164px (a part of this container is visible a part not)

When I move the mouse over div.wrapper-hover it gets class hovered and a style of height 656px and margin-bottom -164px.

[ADDISON74]

After doing some tests, opacity is not easy to achieve in this case (my opinion).

[keefyhub]

https://codepen.io/keefyboooo/pen/xdvRJq

Very quick so might not be what you are looking for.

I don't think using overflow is possible, I tried changing overflow-x: hidden; overflow-y: visible; but it for some reason defaulted to scroll.

I guess you could look at a jQuery solution and slideToggle() the height. Might get messy though.

[arnocl]

Sorry for resurrecting this thread, @ADDISON74 did you find a solution to this problem? I have the same issue, I want to display a menu on hovering a carousel item.

[gendosua]

This discussion might be useful - https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue

[ghost]

I have such problem.
I put the carousel in a container that was set to overflow: hidden and set width and height if needed

[reaboivictor]

I was facing the same issue, the following solution worked (styles are applied to the parent block)
overflow-y: visible; overflow-x: clip;

[muzamil167]

@reaboivictor this solution works but the content shown is not clickable. Any idea to solve this problem??

[reaboivictor]

@reaboivictor this solution works but the content shown is not clickable. Any idea to solve this problem??
@Muzamil-Hussain176 I think there is another reason that makes elements inside slider non-clickable (maybe you have a problem with z-index).
overflow-y: visible; overflow-x: clip; doesn't affect pointer events at all

[aPoluden]

I was facing the same issue, the following solution worked (styles are applied to the parent block) overflow-y: visible; overflow-x: clip;

@reaboivictor worked as a charm when applying styles for both classes .owl-carousel .owl-stage-outer in Firefox. In Chrome block is inactive and closes immediately after pointer goes out of .product-item