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 design knowledge in just a minute or two a day, for free


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.

Free. No spam. Unsubscribe anytime.

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.