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

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

user_14668642 · Answer

I think you want to do this:







Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

If you want to do this then you have to use these:

overflow-x:hidden;
overfloy-y:scroll;

user_16214429 · Answer

This complete slider without bootsatrap

You may need something like this

it's work without bootstrap.

Try this if work , dring some cofee ! ;D

CSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;

    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
}

.row { 
    -webkit-flex-direction: row; 
    flex-direction: row;
}

.flex-item {
    border-radius: 0.5em;
    padding: 5px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: table;

    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.mamOfmom{
    height: auto;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

Use class="mamOfmom" for the main of element in it I made overflow-x: scroll so that it scrolls sideways.

And class="flex-container row" to make the child flex sideways.

And use class="flex-item" for child/Image.

HTML


    
            

            
        
            
        
            
    
            
    
            

            

            
        
            
        
            
    
            
    
            

    


If Me not move its work

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

2 Answers

This complete slider without bootsatrap