Peter Featherstone Peter Featherstone - 3 years ago 99
CSS Question

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

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:

https://jsfiddle.net/ejhyz7t3/

Answer Source

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);
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download