Allow vertical overflow while hiding horizontal overflow

Question

I'm working on my website and I have a div container with 6 divs, divided in two rows of 3 divs.

<div id="container">
<div class="item">Description image 1</div>
<div class="item">Description image 2</div>
<div class="item">Description image 3</div>
<div class="item">Description image 4</div>
<div class="item">Description image 5</div>
<div class="item">Description image 6</div>
</div>

The container width is set to 100% and the overflow is set to hidden. The width of the divs inside the container are set to 33% so it fills (almost) the whole width of the container.

#container {
width: 100%;
overflow: hidden;
}

#container div {
width: 33%;
}

When hovering over one of those 6 divs, it is scaled 1.1 times the original size and this is where I have my problem.

.item {
float: left;
width: 100%;
border: 1px solid;
border-color:  #575757;
position: relative;
opacity: 0.5;

-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

.item:hover {
z-index: 10;
opacity: 1;

-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

Because overflow is set to hidden it hides content when it exceeds the set size of its parent, which is fine for the left and right side of the screen, but I dont want this to happen for the top and the bottom sides of the images.

Is there a way to allow overflow on the top and bottom of the two rows, whilst keeping the overflow to be hidden on the sides?

I created this fiddle which more or less shows my problem (changed the scale to dramatize the effects :P).

Cheers!

Mr. Alien · Accepted Answer · 2014-03-13 18:40:21Z

3

You should use overflow-x: hidden; on #container which will hide the content horizontally, but will show a scroll bar if your content exceeded vertically.

#container {
    width: 100%;
    overflow-x: hidden;
}

Demo

answered Mar 13, 2014 at 18:40

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomjesch Over a year ago

It works, thanks for the super quick reply! Solved the scrolling issue by adding padding to the top and the bottom of the .item class.

Mr. Alien Over a year ago

@Tomjesch Glad to help you out :) and was a very well written question as well

Collectives™ on Stack Overflow

Allow vertical overflow while hiding horizontal overflow

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related