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

Question

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/

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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);
}

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

Sign up