So I expected the icons to move to keep the gap the same when an icon grows on hover, but as it appears transform does not work with flexbox. What should i do to implement this feature? I can code in React if its needed.
Expected flexbox items to move to keep spacing the same.
Items did not change position
:root {
--bg-color: rgb(20, 20, 20);
}
body {
align-items: center;
background-color: var(--bg-color);
display: flex;
height: 100vh;
justify-content: center;
margin: 0px;
padding: 0px;
}
#icons {
display: flex;
flex-wrap: wrap;
width: calc(100% -20px);
gap: 70px;
max-width: 1500px;
white-space: nowrap
}
.icon {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
cursor: pointer;
height: 150px;
width: 150px;
transition: transform 400ms cubic-bezier(.05, .43, .25, .95);
}
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20px;
}
#icons .icon:hover {
transform: scale(1.5);
}
#icons .icon:not(:hover) {
flex-grow: 1;
}<div class="group-icon" id="icons">
<div class="icon">
<img src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
<div class="icon">
<img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
<div class="icon">
<img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
3
Answers
I am not sure if I completely understood your question but from what I read I think you want to grow the image but keep the gap between the icons the same. It does not matter if you are using the
flexboxesor not. You can addoverflow: hiddenon the image wrapper and instead ofscalingthe wrapper scale up the image inside the wrapper. Hope this helps.Instead of using the
transformproperty, I think you’ll need to declare specific dimensions withwidthandheight.You’ll also likely want to declare
align-items: centerfor the Flexbox container.Additionally, your width calculation is invalid (and therefore ignored) because there is not a space after the minus
-character. Instead of "100 percent minus 20 pixels", you have "100 percent negative 20 pixels". However, "100% – 20px" will introduce other issues, so I won’t use it in my answer.The problem is that transform only changes things visually, not size wise.
So this snippet alters the actual width and height on hover and transitions them.
It also translates the image upwards by half the difference in height but you will have to decide whether that is the effect you want if there are multiple lines of images as it won’t move the rows above and below.