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.
Improve your design knowledge in just a minute or two a day, for free
with...
Great Design Details
You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.
Success! Now check your email to confirm your subscription.
by Tom Kenny
I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.
Make More Informed Design Decisions
Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work.
