I want to make overflow-x hidden and overflow-y visible

Question

I have been stuck on this problem for so many days. What I have been trying to achieve is like this,

I have a slider div set it's width and height in which I have boxes sitting next to each other as children. So I want the horizontal overflow of the slider to be hidden(boxes that go outside of the width of the slider). Which can easily be achieved with overflow-x hidden. But the problem is when I hover a box I want to expand it's width and height and show more content and I want them to overflow the slider vertically. Because of that overflow hidden that doesn't work. They got hidden as well. And I want to expand that box's width and height without pushing it's siblings. Example is just like Netflix displays it's movies. When you hover a movie it got expanded and more content is shown.

This is what I have been able to achieve so far

.wrapper {
  width: 80%;
  height: 8rem;
  border: 3px solid green;
  margin: 4rem auto;
}
.slider {
  display: flex;
  overflow-x: hidden;
}
.boxes {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.box-container {
  position: relative;
}
.box {
  width: 8rem;
  height: 8rem;
  background: purple;
  margin-right: 3px;
  transition: all 0.4s;
}
.box:hover {
  height: 20rem;
  width: 15rem;
}




<div class="wrapper">
      <div class="slider">
        <div class="boxes">
          <div class="box-container">
            <div class="box"></div>
          </div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
    </div>

This is what I want to accomplish https://demo.vodlix.com/

Answer 1

overflow-y: visible;
overflow-x: clip;