Zmena veľkosti obrázka a udržanie susedov, kde sa nachádzajú? - jquery

Mám 6 obrázkov vedľa seba v prvkoch li. Keď teraz umiestnim jeden z nich, chcem zmeniť veľkosť tohto obrázka. Funguje to:

<img class="hoverific" width="35" height="35"  src="/images/test.jpg" style="display: inline-block; width: 35px; height: 35px; overflow: hidden;">

CSS:

.hoverific {
text-align: center;
vertical-align: middle;
width: 35px;
height: 35px;
}

JS:

jQuery(".hoverific").hover(function() {
jQuery(this).stop().animate({
width: 360,
height: 360,

});
}, function() {
jQuery(this).stop().animate({
width: 35,
height: 35,

});
});

Týmto sa zmení veľkosť obrázka, na ktorý sa vznášam, ale naruší sa všetko okolo. Chcem plynulú zmenu veľkosti vznášaného obrázka pomocou jQuery. Je prístup správny, alebo existuje lepší spôsob, ako to urobiť?

Vďaka!

odpovede:

Riešením vášho problému by bolo zmeniť okraje obrázka, ktorého veľkosť sa mení:

jQuery(".hoverific").hover(function() {
jQuery(this).css("z-index",2).stop().animate({
width: 360,
height: 360,
"margin-right": -325,
"margin-bottom": -325,
});
}, function() {
jQuery(this).css("z-index",1).stop().animate({
width: 35,
height: 35,
"margin-right": 0,
"margin-bottom": 0,
});
});

Zmena okraja -325 vychádza z -360 + 35 (ak sú počiatočné okraje prvku 0). Ak okraje nie sú 0, použite -360 + 35 + hodnotu pravého (alebo spodného) okraja.
pridať position: relative; do vášho css, aby z-index fungoval (ak nie, váš rozširujúci objekt môže byť ostatnými čiastočne zakrytý).