I have a set of images next to one another.

I'm trying to adjust its width and height on hover using z-index. The dimensions change and it messes up the positioning of nearby elements.

Question: Is there a way to get that zoomed using z-index without affecting positioning of nearby elements?

.some{
  position:relative;
  width:250px;
  height:250px;
}
.some:hover{
  z-index:10;
  width:500px;
  height:500px;
}

<div>
  <img class="some" src=".png">
  <img class="some" src=".png">
  <img class="some" src=".png">
  <img class="some" src=".png">
  <img class="some" src=".png">
  <img class="some" src=".png">
</div>

I have a set of images next to one another.

I'm trying to adjust its width and height on hover using z-index. The dimensions change and it messes up the positioning of nearby elements.

Question: Is there a way to get that zoomed using z-index without affecting positioning of nearby elements?

.some{
  position:relative;
  width:250px;
  height:250px;
}
.some:hover{
  z-index:10;
  width:500px;
  height:500px;
}

<div>
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
</div>

Here is the fiddle https://jsfiddle/jftr2vg0/

• javascript
• html
• css

2 Answers 2

Instead of changing the element's width and height, try transforming it. That should prevent it from moving elements around it.

transform: scale(2);

Here's a fiddle:

https://jsfiddle/5bew5wu5/6/

If you want to stick with this method (there may be other methods that are simpler and more efficient), use absolute positioning, which removes elements from the normal flow, instead of relative positioning, which doesn't and, therefore, impacts surrounding elements.

Here's a basic example:

.cont {
  position: relative;
}

.some {
  width: 250px;
  height: 250px;
  position: absolute;
}

.some:hover {
  z-index: 10;
  width: 500px;
  height: 500px;
}

img:nth-child(1) { top: 0; left: 0; }
img:nth-child(2) { top: 0; left: 255px; }
img:nth-child(3) { top: 0; left: 510px; }
img:nth-child(4) { top: 255px; left: 0px; }
img:nth-child(5) { top: 255px; left: 255px; }
img:nth-child(6) { top: 255px; left: 510px; }

<div clas="cont">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
</div>