CSS Only Dropbox Colour Palette Hover Effect

Dropbox released a new brand guidelines website that looks amazing! I was particularly fascinated by the cool hover on the colour palette section. After playing with it for about an hour, like a really satisfying fidget toy, I thought to myself: "I bet I could make this in CSS."

The effect looks like this: when you hover over one of the swatches it pops up on a slight angle, revealing the name and hex code. On top of that, the two swatches before, and the next swatch after the one you are hover also pop up a small amount. An effect that wouldn't be achievable in CSS 10 years ago, but with the semi-recent :has() this is now possible.