Expand Div over others on mouse over jquery

Question

i\'m actually trying to build a products list inside a table. I already have the php code which takes data from db and places in the page but i\'m stuck with jquery and java

Answer 1

I recommend not using tables to set the layout of the product listing. Using divs with set widths/heights is much more suited to your application. Using absolute positioning within boxes set to relative positioning will allow you to achieve what you're 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's the full example: http://jsfiddle.net/wms6x/