Enlarge on hover image overlap issue (CSS Transform: Scale)

Question

I've been struggling with creating a page on which I can display multiple images which, on hover, will enlarge approximately 80% of the page width. To do this, based on the answers of other questions on here, I have used transform: scale (). The problem I face is that this seems to result in the images overlapping when enlarged. What I'm hoping to achieve is for the images to push each other down the page when enlarging, rather than going over or under.

Please excuse my messing attempt at solving this. Coding in general is very new to me.

https://jsfiddle.net/msandford/zjrc7v6s/

.image1 { `display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image1:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}

Thanks in advance.

Sam Apostel · Accepted Answer · 2017-08-12T08:03:36.617

The scale() function keeps the bounding box of the original element thus not pushing the other images, I could have played around with adding a margin (top and bottom) but then the image jumps around so I opted for just using the width property (why not? what was your initial question that led to scale()?)

#scale {
  text-align: center; /* to align all inline content inside the div */
}

#scale img {
  width: 150px;
  transition: 0.4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

#scale img:hover {
  width: 80%;
}

<div id="scale">
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg">
</div>

Also I think I should point out that you were using classes wrong.

A class is a string that you would apply to all of the images and then you can do .scalethis{} in css to apply that to all of your images at once.

How you were using it was like how you should use id

Enlarge on hover image overlap issue (CSS Transform: Scale)

1 Answers1