contact us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right.


Round Rock Texas 78680
USA

5125085388

Howdy! My name is Ansa and I'm a designer in Austin, Texas.

Currently I am a User Experience Architect at Chaotic Moon. Previously, I spent two years as a freelance interaction designer and before that, some time as creative lead at a startup. I like to occasionally write about things I'm thinking about or working on, and I even change my mind occasionally. 

 

 

Blog

Freelance designer based in Austin, Texas.

Hover-friendly Hexagons

Ansa Copeland

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.

Screen shot of hexagonal image.

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.

Diagram of hexagon with containing div and masks.

You can check out the CodePen I put together here to see it in action.