Redimensionner une image et garder les voisins où ils sont? - jquery

J'ai 6 images côte à côte en éléments li. Maintenant, lorsque je survole l'un d'eux, je veux redimensionner cette image. Ça marche:

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

});
});

Cela redimensionne l'image que je survole, mais gâche tout autour. Je veux un redimensionnement fluide de l'image survolée à l'aide de jQuery. L'approche est-elle correcte ou existe-t-il une meilleure façon de procéder?

Merci!

Réponses:

Une solution à votre problème serait de modifier les marges de l'image en cours de redimensionnement:

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

Le changement de marge de -325 provient de -360 + 35 (si les marges initiales de l'élément sont 0). Si les marges ne sont pas égales à 0, utilisez -360 + 35 + la valeur de la marge droite (ou inférieure).
Ajouter position: relative; à votre css pour que le z-index fonctionne (sinon, votre objet en expansion peut être partiellement couvert par les autres).