On one of my recent web projects part of my design included a hexagonal grid of images. The design involved being able to hover over the images to reveal a description. While building out the site I ran into an interesting problem - how does one build hover-friendly hexagons? To see a sample of what I'm talking about, check out this CodePen.
As always, there are likely many other ways to do this. If you have any other ideas or suggestions, I'd love to hear them.
The first step is obvious. Using Photoshop, I cut the images to fit the desired grid size. Setting up the grid of images was super simple - just three rows of inline elements. I set a negative top-margin on the bottom two rows to make the hexagonal images nestle together nicely.
So that part was easy. Then I started playing around with the hover effect. I knew I wanted to display the relevant service or skill set when users hovered over each hexagon, but obviously I couldn't just set the hover to the images as the images are rectangular.
So to work around this, I ginned up a set of masks that sit on top of each image. The execution is simple - 3 identical divs, rotated around the central point of the image. (See image 2 below.) Combined, they result in a perfect hexagon. With the mask in place, I applied a bit of jQuery to fade in / fade out the text and overlay.