Развернуть Div над другими на мыши над jquery

Question

Я действительно пытаюсь создать список продуктов внутри таблицы. У меня уже есть php-код, который берет данные из db и места на странице, но я застрял в jquery и javascript, я такой noob. Я читал вокруг некоторой документации и я вышел с этим сценарием:

яваскрипта

$(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; 
}  

вы можете увидеть демо здесь: http://jsfiddle.net/fozzo/EWJGJ/

Но это не совсем то, что мне нужно. Когда div расширяется, он должен расширяться от центра над остальными, которые вместо этого должны оставаться в своих положениях. Я думаю, что это связано с использованием z-index и position в css, насколько я читаю рабочие примеры, но я действительно не понимаю, как заставить его работать. Любая помощь была бы полезной.

Answer 1

Ответ был переработан на основе разъяснений в ФП в его вопроса

Вы должны позиционировать .contenitore абсолютно и положение его в левом верхнем углу родительского контейнера .principale. Родитель должен иметь относительную позицию, в то время как контент-контент должен быть абсолютно позиционирован.

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

Кроме того, вы не можете использовать text-align: center для центрирования элемента изображения. Вместо того, чтобы использовать margin: 15px auto:

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

По событию парения, изменить размер содержимого, а также анимировать верхнюю и левую позиции:

$(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 
    }); 
}); 
}); 

См скрипку здесь - http://jsfiddle.net/teddyrised/EWJGJ/6/

Answer 2

вы могли бы на самом деле делайте это без каких-либо js вообще, если вы немного подумаете о подходе ... HTML-разметка немного отличается, но вы бы получили гораздо лучшую производительность, если бы это было сделано только с помощью 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

Я не рекомендую использовать таблицы, чтобы установить расположение списка товаров. Использование div с заданной шириной/высотой намного больше подходит для вашего приложения. Использование абсолютного позиционирования в ячейках, установленных для относительного позиционирования, позволит вам достичь того, что вы пытаетесь сделать довольно легко.

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

Вот полный пример: http://jsfiddle.net/wms6x/