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. 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.
Neat little trick to create interactive hexagons with CSS, although without any responsive web design abilities. It’s possible to create the hover effect with CSS too, without using jQuery.
It’s worth noting I’ve seen this technique used before this post was created with responsive web design in mind. You can see it in action here.