The title pretty much asks the question but I know using overflow-y: hidden and overflow-x: hidden you can hide either the top and bottom or the left and ride side of an element but is there a way to only hide one side using these selectors.
In particular I am interested in hiding the bottom of a div that is overflowing but not the top.
If not is there any other CSS only way to accomplish this desired effect?
There is a legitimate purpose for needing this and I'd like to see if there is a standard way of doing this.
To explain slightly, I am only in control of the CSS for a slideshow and I need to push an element inside the slideshow div up above the div however the overflow: hidden values are cutting off this pushed up div when I do this. I can remove the overflow: hidden completely of course but then that doesn't make for a very good slideshow!
A fiddle is included below:
The below jsfiddle based on the example in the question provides the desired effect of cutting off only the bottom edge using 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);
}