Expand div over others on mouse over jquery

Question

I am really trying to create a list of products inside a table. I already have php code that takes data from db and place on the page, but I'm stuck in jquery and javascript, I am such a noob. I read some docs and I came out with this script:

Javascript

$(window).load(function(){ $('.principale').hover(function() { $(this).animate({ width: 215, height: 350, margin: 0, }, 'fast'); /* $(this).animate().css('box-shadow', '0 0 10px #44f')*/ $(this).animate().css('box-shadow', '0 0 5px #000') }, function() { $(this).animate().css('box-shadow', 'none') $(this).animate({ width: 210, height: 240, margin: 0, }, 'fast'); }); }); 

CSS

 .tabellainizio { margin-top:100px; } .bordini { border: 1px #DDD solid; } .principale { height: 240px; width: 210px; overflow: hidden; } .principale .contenitore { height: 240px; width: 210px; float: left; display: block; } .immagine { border: 1px solid maroon; text-align: center; margin: 15px; height: 168px; width: 168px; position:relative; } .content { display: none; margin: 15px; } .contenitore:hover { width: 215px; height: 350px; margin: 0px; border: 1px solid black; } .contenitore:hover .content { display: block; } .contenitore:hover .immagine { position:relative; } 

here you can see the demo: http://jsfiddle.net/fozzo/EWJGJ/

But this is not quite what I need. When a div expands, it should expand from the center above the others, which should instead remain in their positions. I think this is due to the use of z-index and position in css, as far as I read working examples, but I really don't understand how to make it work. Any help would be helpful.

Answer 1

The answer was revised on the basis of an explanation of the OP of his question.

You will need to fully position the .contenitore and place it in the upper left corner of the parent .principale container. The parent must have a relative position, while the child of the content must be absolutely positioned.

 .principale { height: 240px; width: 210px; position: relative; } .principale .contenitore { background-color: #fff; height: 240px; width: 210px; position: absolute; display: block; top: 0; left: 0; } 

In addition, you cannot use text-align: center to center an image element. Use margin: 15px auto instead:

 .immagine { border: 1px solid maroon; margin: 15px auto; height: 168px; width: 168px; position:relative; } 

When a freeze event occurs, you resize the content and animate the top and left positions:

 $(window).load(function(){ $('.contenitore').hover(function() { $(this).animate({ width: 300, height: 400, top: -80, // Half the height difference 0.5*(400-240) left: -45 // Half the width difference 0.5*(300-210) }, 'fast'); $(this).animate().css('box-shadow', '0 0 5px #000'); $(this).css({ zIndex: 100 // Change z-index so that is the positioned above other neighbouring cells }); }, function() { $(this).animate().css('box-shadow', 'none') $(this).animate({ width: 210, height: 240, top: 0, left: 0 }, 'fast'); $(this).css({ zIndex: 1 }); }); }); 

See the fiddle here - http://jsfiddle.net/teddyrised/EWJGJ/6/

Answer 2

you could do it without any js at all, if you think about the approach a bit ... HTML markup is a bit different, but you would get much better performance if it were only done with css:

http://jsfiddle.net/adamco/GeCXe/

 ul,li{ list-style:none;padding:0;margin:0; } ul{ width:400px; } li, .item { width:100px; height:100px; } li { float:left; margin:5px; position:relative; } .item { background-color: #eee; border:1px solid #ccc; position:absolute; z-index:1; -webkit-transition:all 0.1s ease-in-out; } .item:hover { width:110px; height:200px; z-index:2; -webkit-transform:translate(-5px,-5px); -webkit-box-shadow: 1px 1px 1px #888; } 

Answer 3

I recommend not using tables to set the layout of the product list. Using a div with a given width / height is much more suitable for your application. Using absolute positioning in the cells set for relative positioning will allow you to achieve what you are trying to do quite easily.

CSS

  .outside { float: left; width: 150px; height: 150px; position: relative; padding: 10px; } .inside { position: absolute; border: 1px solid #000; width: 150px; height: 150px; background: #eee; z-index: 900; } 

JQuery

 $('.inside').hover( function () { $(this).animate({ height: '200px', width: '200px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); 

Here is a complete example: http://jsfiddle.net/wms6x/