CODEWITHSUNDEEP
javascripthtmlcss
meteor
meteor

Reputation: 2568

Change width and height of element on hover

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.net/jftr2vg0/

Upvotes: 2

Views: 5362

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371163

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>

Upvotes: 1

Chris Riebschlager
Chris Riebschlager

Reputation: 1333

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.net/5bew5wu5/6/

Upvotes: 8

Related Questions