KPC
Kevin Powell - Community•4w ago
uylio

Increasing Div's width from it's center

Example with explanation in the codepen: https://codepen.io/mab141211/pen/VYwzMqN?editors=1100 I've been at it for so long and tried multiple ways to achieve this. This was the last way that I tried. I hope someone can help.
Over Thinker
CodePen
Untitled
...
10 Replies
Kapteyn Universe
Kapteyn Universe•4w ago
Looks like you did what you want to do, If i don't misunderstood your comments. You just want to make the same thing with flex, right? You can wrap alone div with another div and use flex-grow. If alone needs to be 80vw, you can change max-width with min. Also don't use viewport units for font sizes. 
.alone-wrapper {
  border: 2px solid red;
  display: flex;
  justify-content: center;
}

.alone {
  text-align: center;
  border: 2px dotted blue;
  transition: flex-grow 0.5s ease;
}

.alone:hover {
  flex-grow: 1;
}
.alone-wrapper {
  border: 2px solid red;
  display: flex;
  justify-content: center;
}

.alone {
  text-align: center;
  border: 2px dotted blue;
  transition: flex-grow 0.5s ease;
}

.alone:hover {
  flex-grow: 1;
}
uylio
uylioOP•4w ago
thanks for the help. This is what I want and it works for 1 div but it didn't work for multiple divs, as when there are multiple divs then there is no space to grow. 😦
Kapteyn Universe
Kapteyn Universe•4w ago
Yea, your full divs are too big. Idk if it can be done with them but https://codepen.io/KapteynUniverse/pen/KwKvZeO
Asilcan Toper
CodePen
Untitled
...
Kapteyn Universe
Kapteyn Universe•4w ago
Without flex, it should be possible to reduce widths of other divs with some selectors but it probably will cause overflow
uylio
uylioOP•4w ago
ye IK, I'm kinda trying to do it like this: https://www.pinterest.com/pin/926404585851437023/feedback/?invite_code=01f80149dd7d494b8f773adec653be37&sender_id=926404723257547656
ᗷᗩSᓰᖶ
Pinterest
Places & Spaces Gallery [동영상] | 웹사이트 디자인, 웹 디자인 영감, 웹디자인
Places & Spaces Gallery designed by Rolf Jensen for Love Henry. Connect with them on Dribbble; the global community for designers and creative professionals.
clevermissfox
clevermissfox•4w ago
You can animate flex properties and raise the flex grow value for the div that’s being hovered so its ratio is higher than the other divs. I’m not certain which part of the video linked is what you’re aiming for - the city name gets hovered and images appear on either side , then slides to the left side , or then once the image is clicked on it scales up, centers on the screen, and the dark background overlay covers everything else .
Kapteyn Universe
Kapteyn Universe•4w ago
For the first 4 secs updated my codepen, first and last item is meh but maybe it can give you an idea. But after the 4 seconds 😄 i would use gsap or smth
uylio
uylioOP•4w ago
ye, I was talking about the first 4 seconds I've the other bit down with GSAP 😆 I just can't the them to stack up "horizontally" correctly " the city name gets hovered and images appear on either side , then once the image is clicked on it scales up, centers on the screen" these 2 parts I've the rest done and when used alone like shown in codepen (div with hello) it works but togather with multiple divs it doesn't expand, and when it does with 
.full-wrapper {
  display: flex;
  justify-content: center;
}
.full-wrapper {
  display: flex;
  justify-content: center;
}
I can't see the first few divs I guess thats because how flex property works, adding 
margin-left
margin-left
is not the solution can you check my code pen now, I ended up using grid and without 
 justify-content: center;
 justify-content: center;
and with 
 scroll-snap 
 scroll-snap
we kinda get that effect of div growing from the middle rather than one side. but playing with it a bit we see that if the specified div is not in the middle the animation gets janky. any idea how to fix that? also I feel like this discussion might lead to JS so can I switch my tags somehow?
Kapteyn Universe
Kapteyn Universe•4w ago
I did try to fix that when I first made the animation with flex by changing the order, but it caused a visual infinite glitch 😄. The same thing happened with grid too, but it should be possible to grow the hovered div using grid-column: 1 / -1 and push the others to the next row, I believe. However, it seems like scrolling is blocking that behavior. Of course, that will possibly cause another issue— even if you manage to make the growth smooth (I'm not sure if it's possible to use transition with grid properties like I did with flex-grow before), the divs before the hovered one will probably jump to the next row before the hovered div completes its growth. Other than that, I can't think of anything else.
clevermissfox
clevermissfox•4w ago
Yes you can transition grid columns and rows but it’s very picky about changing the values. It has to be the same units and methods. Won’t work with the repeat function eg 
grid-template-columns: repeat(3,1fr);
   &:hover{
     grid-template-columns: repeat(2,1fr) 3fr;
   }
/* this won’t work ^^^*/

/* but to transition , has to be the same units */

grid-template-columns: minmax(20lh, 1fr) repeat(2,1fr) 20vh; 

  &:hover {
    grid-template-columns: minmax(0lh, 0fr) repeat(2,1fr) 30vh;
  }
grid-template-columns: repeat(3,1fr);
   &:hover{
     grid-template-columns: repeat(2,1fr) 3fr;
   }
/* this won’t work ^^^*/

/* but to transition , has to be the same units */

grid-template-columns: minmax(20lh, 1fr) repeat(2,1fr) 20vh; 

  &:hover {
    grid-template-columns: minmax(0lh, 0fr) repeat(2,1fr) 30vh;
  }

Did you find this page helpful?