Hexagons with Hover Effect

by Tom Kenny (@tkenny)

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.

Source: http://blog.ansacopeland.com/chatter/2013/3/25/hover-friendly-hexagons

Improve Your Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 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. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.