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

you could actually do this without any js at all if you re-think the approach a little... The HTML markup is a bit different, but you would have much better performance if it was done with just 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 2

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/

Answer 3

Answer has been reworked based on the OP's clarification of his question

You will have to position .contenitore absolutely and position it from the top left corner of the parent container .principale. The parent should have a relative position while the content child should 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;
}

Also, you cannot use text-align: center to center the image element. Instead use margin: 15px auto:

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

Upon the hover event, you change the size of the content and also 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 fiddle here - http://jsfiddle.net/teddyrised/EWJGJ/6/