Hover around the boxes below CSS only

CSS-only directionally aware hover
Hover around the boxes below by Giana.
Using :hover and the sibling selector (~), we can apply different styles to elements based on their position. Removing the visibility transition gets rid of the previous element's ghost for a cleaner slide-in with no slide-out. Layout and images are auto-generated with Pug. Refresh for something different,
codepen
See the Pen CSS-only directionally aware hover by Giana (@giana) on CodePen.