javascript - Change width and height of element on hover - Stack Overflow

admin管理员组

文章数量:1336131

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

Share Improve this question Follow edited Jan 5, 2018 at 13:46 Michael Benjamin 372k110110 gold badges613613 silver badges730730 bronze badges asked Jan 5, 2018 at 0:26 meteormeteor 2,56844 gold badges3939 silver badges5757 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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>

本文标签： javascriptChange width and height of element on hoverStack Overflow