Need Guidance - How to start?


FreeCodeCamp online member’s status
Picture01 without Hover
Picture02 with Hover

Which path I should go for making this
for the picture02 I used
display: flex
flex-direction:row
flex-wrap: wrap

I’m not sure what you are asking. Is the image your code? If so, is it not working as you want it to?

You do not really need flexbox as the elements are inline elements and will wrap to a new line just like letters/words do.

Looks like it is using a negative margin with a transition and adding and removing the margin on hover.

Example code copied from DOM source.

I want to code that picture but don’t know how to start.

You can look at how it is done using the dev tools and replicate it or just copy the code. The JSFiddle I posted is the code from the source.

I don’t think flexbox is the correct solution for this. You can use flex-wrap to do the wrapping. But as the children are already inline elements it isn’t really needed. If they were block-level elements it might be an idea to use flex-wrap. But not for the actual hover effect. If the gap property allowed for negative values I might see it working with flexbox.

You might also be able to use CSS grid as it lets you do overlap but again that would not be anywhere near as easy as just using negative margins (which you remove on hover).