title: Html list expand hover min-height
body: <p>I am trying to get a list with background working with hover state that are going to expand the element hovered and reduce the height or the element not targeted.</p>
  
  <p>This is the link to my fiddle.</p>
  
  <p><a href="http://jsfiddle.net/9dm9nwru/3/" rel="nofollow">http://jsfiddle.net/9dm9nwru/3/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;ul class="list"&gt;
      &lt;li class="test1"&gt;&lt;/li&gt;
      &lt;li class="test2"&gt;&lt;/li&gt;
      &lt;li class="test3"&gt;&lt;/li&gt;
      &lt;li class="test4"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.list li {
  width:100%;
  height: 150px;
  display: block;
  
  -webkit-transition: all 0.3s ease;                  
  -moz-transition: all 0.3s ease;                 
  -o-transition: all 0.3s ease;   
  -ms-transition: all 0.3s ease;          
  transition: all 0.3s ease;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.list ul {
      min-height: 600px !important;
      display: block;
  }
  .test1 {
      background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background-plane-wallpaper-58814.jpg") no-repeat center center;
  }
  .test2 {
     background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background-plane-wallpaper-58814.jpg") no-repeat center center;
  }
  .test3 {
      background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background-plane-wallpaper-58814.jpg") no-repeat center center;
  }
   .test4 {
      background: url("http://www.desktopwallpaperhd.net/wallpapers/5/e/flying-background- plane-wallpaper-58814.jpg") no-repeat center center;
   }
  
  .container {
      height: 100%;
      max-height:600px !important;
      overflow: hidden;
      width: 100%;
      display: block;
      margin: 0 auto;
  }
  
      $( ".list li" ).hover(
    function() {
        $( this ).css('height','200px');
        $( ".list li" ).not( this ).css('height','100px');
    }, function() {
        $( this ).css('height','150px');
        $( ".list li" ).not( this ).css('height','150px');
    }
  );
  </code></pre>
  
  <p>The problem I encounter is that the whole container doesn't keep the same height. IT means that when you hover on an element the whole container goes up to. Is setting a min-height to it not enough so it always stays 600px height and elements adjust height depending on this height ?</p>
  
  <p>I tried using percentages but with no luck.</p>