title: Allow vertical overflow while hiding horizontal overflow
body: <p>I'm working on my website and I have a div container with 6 divs, divided in two rows of 3 divs. </p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div class="item"&gt;Description image 1&lt;/div&gt;
  &lt;div class="item"&gt;Description image 2&lt;/div&gt;
  &lt;div class="item"&gt;Description image 3&lt;/div&gt;
  &lt;div class="item"&gt;Description image 4&lt;/div&gt;
  &lt;div class="item"&gt;Description image 5&lt;/div&gt;
  &lt;div class="item"&gt;Description image 6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <pre><code>#container {
  width: 100%;
  overflow: hidden;
  }
  
  #container div {
  width: 33%;
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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?</p>
  
  <p>I created <a href="http://jsfiddle.net/35xK9/1/" rel="nofollow">this</a> fiddle which more or less shows my problem (changed the scale to dramatize the effects :P).</p>
  
  <p>Cheers!</p>