Drop-down card inside slider and overflow?

The challenge is to make a slider with cartoonami, while when you hover over a card it should increase in size from the bottom (or fall, for another), but because of overflow: hidden slider the dropdown part cannot be seen.
Example:

Could this have something to do?
March 25th 20 at 13:42
2 answers
March 25th 20 at 13:44
Solution
You will only hack with indentations. Do not just me.

Added to the container, which applied the overflow: hidden, the following styles:

padding-bottom: 1000px; // do indentation internal
margin-bottom: -1000px; // subtract the indent outward that neutralize

In your case, like, no problem, if only on CSS to do without any speakers (but better in JS, read about it under the spoiler):



Read here more about the solution by adding a class to the container, because sometimes we do need for some reason

If you have planned extra functionality, extensibility, etc., it is better to make a universal solution in JS, it is more difficult, but sometimes it's necessary.

The CSS approach might work, but maybe not. You like the fit the easiest. I spent the day on the search universal CSS solutions, but eventually came to the conclusion that in the CSS to make this not OK if we need a full animations, transitions, hover, etc. For example, there is some delay if you need to change the z-index on :hover. Apparently, some processing features :hover the browser.

If JS: when hover over a slide to be added to the container, which applied the overflow: hidden class with the same styles Usupov what I wrote above. The class can add to the common parent but the styles still apply to the fact that c overflow: hidden (that's what I did in the example below).

In the end we get a La this:



Huck's got one problem (solved): if you have elements, like buttons with arrows on the absolute positioning inside a sliding block with oveflow: hidden, then those items will ride, for you the actual size of the block increased by using padding-bottom. This is just costing half deducted the offset and half the size of the item.
Good option, thanks. - Tess.Gutmann commented on March 25th 20 at 13:47
@Tess.Gutmann, and he only if we want to deceive overflow.

Not at all! - zoila.Maggio63 commented on March 25th 20 at 13:50
March 25th 20 at 13:46
slick > div {
width: 100%;
height: 200px;
}
(Height to specify what should be under the size drop-down block.)

Find more questions by tags SliderLayoutCSS