Як змінити розмір зображення та зберігати сусідів, де вони? - jquery

У мене 6 зображень поруч із елементами li. Тепер, коли я наведіть один з них, я хочу змінити розмір цього зображення. Це працює:

<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,

});
});

Це змінює розмір зображення, на якому я наближаюся, але заплутує все навколо. Я хочу плавно змінити розмір зображення, що наближається, за допомогою jQuery. Чи правильний підхід, чи є кращий спосіб зробити це?

Дякую!

Відповіді:

Рішенням вашої проблеми буде зміна розмірів зображень, які змінюються за розміром:

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

Зміна поля -325 походить від -360 + 35 (якщо початкові поля елемента 0). Якщо поля не дорівнюють 0, то використовуйте -360 + 35 + значення правого (або нижнього) поля.
Додати position: relative; до вашого css, щоб z-індекс працював (якщо ні, ваш об'єкт, що розширюється, може бути частково охоплений іншими).