CODEWITHSUNDEEP
jqueryhtmlcss
Kiwimoisi
Kiwimoisi

Reputation: 4192

Html list expand hover min-height

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.

This is the link to my fiddle.

http://jsfiddle.net/9dm9nwru/3/

<div class="container">
<ul class="list">
    <li class="test1"></li>
    <li class="test2"></li>
    <li class="test3"></li>
    <li class="test4"></li>
</ul>


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

}

.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');
  }
);

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 ?

I tried using percentages but with no luck.

Upvotes: 0

Views: 355

Answers (1)

Devin
Devin

Reputation: 7720

change 

$( ".list li" ).not( this ).css('height','100px');

to 

 $( ".list li" ).not( this ).css('height','133px');

and in CSS

.list ul {
height: 600px;
display: block;
}

see fiddle here

also, I'd change this line

$(this).css('height', '200px');

to 

$(this).css('height', '201px');

to make up for the 1px difference, but it's not very noticeable and really not needed if you don't want to

Upvotes: 1

Related Questions