Increase and decrease width and height of a block in a list on hover

Question

I have a list which I want to increase width and height of each block in 0.5s while user hover it. and then decrease to the default size after mouse out again in 0.5s.

my problem is how to set z-index to show it in front of the other blocks on my list while mouse hover it and then when mouse out it adjust in default size and place

this is my html list:

<div id="twelvetour">
<nav>
  <ul class="row">
     <li class="col-md-2">
         <div  class="twelveeffect">
             <a href="">
               <img class="img-responsive" src="" alt="" />
                <p class="text-center">LOREM IPSUM</p>
              </a>
         </div>

     </li>
     <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">LOREM IPSUM</p>
           </a>
        </div>
    </li>
    <li class="col-md-2">
      <div class="twelveeffect">
         <a href="">
          <img class="img-responsive" src="" alt="" />
          <p class="text-center">LOREM IPSUM</p>
         </a>
      </div>                  
    </li>
 </ul>
</nav>
</div>

and this is my jquery:

 $("#twelvetour li>div.twelveeffect").hover(
 // Mouse Over
 function () {

  //problem is here
  $("#twelvetour li").css("zIndex",9 );

  $(this).animate({ width: '130%', height: 400 }, 500);
},
// Mouse Out
function () {


  $(this).animate({ width: '100%', height: 250 }, 500);


 });

as I mentioned my problem when I set z-index like this then it changes all of my list and again my hovered block overflow is behind it's brother but my goal is to have it front of it. and its very important for me when a block hovers, it didn't effect on the others place.

I tried some ways, some of them works in increasing but on decreasing after mouse over, the effect didn't work fine. it suddenly drops behind before 0.5s, it's width goes behind its brother. and my problem is for blocks in row not columns.

appreciate any help thanks.

Answer 1

I'm not too well versed in jquery but I hope my response will be helpful nonetheless. I find it much easier to do animations with native CSS.

In the below example, the div will expand its width on hover and contract when the user takes the cursor off the div.

The "transition" property tells the browser to animate any changes made to the element. So once we have that in place, we can just change the "width" property on hover and it will be nicely animated for us. We can do the same thing with "z-index".

you could alternatively use transform: scale(1.2, 1); to increase the width of an element without it affecting other elements in the list.

.anAwesomeDiv {
   width: 100px;
   color: white;
   height: 100px;
   background-color: blue;
   transition: 0.5s;
 }

.anAwesomeDiv:hover {
   width: 200px;
   z-index: 50;
 }

<div class="anAwesomeDiv">
  Look how awesome this div is!
</div>

Answer 2

Maybe you can work with something like this:

var li 		    = $('#twelvetour li');
var liWidth 	= li.width();
var liLeft 		= 0;
var liMargin 	= 40;

li.each(function(){
  $(this).css({
    left : liLeft + 'px'
  });
  liLeft = liLeft + liWidth + liMargin;
});

a {
  text-decoration: none;
  color: #555;
  font-family: Arial, Helvetica sans-serif;
}

/*------------------------------------*/


#twelvetour {
  position: relative;
}

#twelvetour li {
  position: absolute;
  background: #e7e7e7;
  height: 50px;
  overflow: hidden;
  width: 100px;
  overflow: hidden;
  transition: all 200ms ease;
  padding: 15px;
}

#twelvetour li p {
  margin: 0;
}

.twelveeffect {
  
}

#twelvetour li:hover {
  z-index: 3;
  padding: 30px;
  background: #1755ff;
  transform: translate(-15px);
  height: 300px;
  
}

#twelvetour li:hover a {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twelvetour">
  <nav>
    <ul class="row">
       <li class="col-md-2">
           <div  class="twelveeffect">
               <a href="">
                 <img class="img-responsive" src="" alt="" />
                  <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                </a>
           </div>

       </li>
       <li class="col-md-2">
          <div class="twelveeffect">
             <a href="">
              <img class="img-responsive" src="" alt="" />
              <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
             </a>
          </div>
      </li>
      <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
           </a>
        </div>                  
      </li>
   </ul>
  </nav>
</div>

Answer 3

$("#twelvetour li .twelveeffect").hover(
 // Mouse Over
 function (event) {

  //problem is here
 $(this).parent().css("zIndex",9);

  $(this).stop().animate({ width: '80%', height: 400 }, 500);
},
// Mouse Out
function (event) {


  $(this).stop(true,true).animate({ width: '40%', height: 50 }, 500);
  event.stopPropagation(); 
  event.preventDefault(); 

 });

.twelveeffect {background:blue;color:white;width:30%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="twelvetour">
<nav>
  <ul class="row">
     <li class="col-md-2">
         <div  class="twelveeffect">
             <a href="">
               <img class="img-responsive" src="" alt="" />
                <p class="text-center">LOREM IPSUM</p>
              </a>
         </div>

     </li>
     <li class="col-md-2">
        <div class="twelveeffect">
           <a href="">
            <img class="img-responsive" src="" alt="" />
            <p class="text-center">LOREM IPSUM</p>
           </a>
        </div>
    </li>
    <li class="col-md-2">
      <div class="twelveeffect">
         <a href="">
          <img class="img-responsive" src="" alt="" />
          <p class="text-center">LOREM IPSUM</p>
         </a>
      </div>                  
    </li>
 </ul>
</nav>
</div>

Answer 4

Try using:

$(this).parent().css("zIndex",9);

instead of

$("#twelvetour li").css("zIndex",9);

on line 6 of your js