转换div时如何阻止兄弟姐妹移动？

Question

I'm working on a Javascript which scales a div, amongst other things, when hovered on. The problem is that the siblings to that div move when it resizes. I understand why this happens, but I don't know how to stop it. I've tried to change the z-index but it doesn't stop the others from moving.

$(".medarbetareObjekt").mouseenter(function () {
$(this.getElementsByTagName("address")[0]).css("display", "inline");
$(this).css("background-color", "#f2f2f2");
$(this).css("font-weight", "100");
$(this).css("z-index", "1000");
$(this).css("width", "40%");
$(this).css("border-radius", "10px");
$(this.getElementsByTagName("img")[0]).css("width", "80%");
$(this.getElementsByClassName("img-circle")[0]).css("margin-top", "5px");
}).mouseleave(function () {
$("address").css("display", "none");
$(this).css("background-color", "transparent");
$(this.getElementsByClassName("img-circle")[0]).css("margin-top", "0px");
$(".medarbetareObjekt").css("font-weight", "300");
$(this).css("z-index", "10");
$(this).css("width", "20%");
$(this).css("border", "none");
$(this.getElementsByTagName("img")[0]).css("width", "100%");
});

So to sum it all up, how do I resize a div without affecting other divs?

https://jsfiddle.net/mellquist/58jmo1au/31/

Answer 1

I added this css..

.zoom {
  -webkit-transform:scale(2);
  -moz-transform:scale(2);
  transform:scale(2);
}

And modified your script to add with these lines ..

$(this).addClass("zoom") and $(this).removeClass("zoom")

Plus I removed a lot of the transforms and such from both your script and css. In doing so I somehow remove the centering of your text below the images. I will leave that to you to trouble shoot

here is an updated fiddle https://jsfiddle.net/pokd8jv9/2/