Using overflow-y: hidden or overflow-x: hidden to hide only one side of an element

Question

The title pretty much asks the question, but I know that with overflow-y: hidden and overflow-x: hidden you can hide either the top, bottom, or left side and part of the element’s movement, but there is a way to hide only one side, using these selectors.

In particular, I'm interested in hiding the bottom of the div, which is crowded, but not the top.

If not, is there any other way just for this effect?

There is a legitimate purpose for this, and I would like to see if there is a standard way to do this.

To explain a bit, I only control the CSS for the slideshow, and I need to click on the element inside the slideshow div above the div , however overflow: hidden values overflow: hidden this upward click of the div when I do this. I can completely remove overflow: hidden , but then this is not a very good slide show!

Below is the fiddle:

https://jsfiddle.net/ejhyz7t3/

Answer 1

Below jsfiddle, based on the example in the question, gives the desired effect of clipping only the bottom edge with clip :

https://jsfiddle.net/ejhyz7t3/2/

The full code is copied below for reference:

HTML

 <div class="outer-container"> <div class="inner-container"> </div> </div> 

CSS

 .outer-container { background: red; height: 100px; margin-top: 100px; width: 150px; padding-left: 50px; } .inner-container { background: green; height: 200px; width: 100px; transform: translateY(-50px); position: absolute; clip: rect(0, 100px, 150px, 0); } 

Answer 2

I had a similar problem when I had a draggable div that I wanted to overflow right / down, but not top / left. I solved this by setting the z-index. Container div in z-index: 0px; draggable to z-index: 500 pixels; and divs in the top and left (menu) in z-index: 1000px ;. This effectively clamped the draggable layer, allowing it to overflow in the directions I wanted.

Answer 3

 .mydiv { clip: rect(-100px, -100px, auto, -100px); } 

Set the bottom of the clip to auto clips, such as overflow: hidden . -100px values -100px chosen arbitrarily to leave room for overflow.