placemat | Some pretty nice placeholder nouns for your site | Static Site Generator library

By default, CSS flexbox won't allow items to wrap to the next line. But you can choose to allow flex items to wrap by using CSS flex-wrap: wrap; on the flexbox container.

You could replace the first line in your HTML with:

After this change your example doesn't look perfect from a design point of view, some of the alignments are off, but I think this is your immediate blocker.

If you're interested, I highly recommend these resources for learning about CSS flexbox:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://flexboxfroggy.com

Bulk-selecting like that probably isn't going to give the result you're after, since it would still target the children and parents of the element you want to keep opaque - lowering its opacity in the process.

There are a few different ways you could handle this. You might add some kind of "mask" element (typically an empty div is used for things like this) with a translucent background-color (ala rgba(255,255,255,0.5)). Getting the hovered-on item to override that mask could be done by changing the z-index, so everything that's not hovered is at a lower index than the mask div and the thing getting hovered is at a higher one.

That said, you might want to think twice about this. What's the benefit of making the non-hovered parts of the site harder to see? Could you find another way to highlight the hovered item for emphasis, without fading out everything else? Keep usability in mind when you're dealing with questions like this one.