css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

CSS Hexagon grid with animation flip on hover


  1. Hi John from a fellow RVAer :) I actually met with Ralph at your offices a few months ago. Congrats on being featured on the front page!

    At one point I went pretty deep into researching this stuff… Fixed width isn't always the best for responsive design, so you might be interested in checking out a few of my pens with fluid hexagons using percentage based widths:

  2. @joeyhoer Hey Joey! Thanks! I enjoyed digging into your examples. I agree that fixed width isn't always the best, I created multiple sizes to try and accommodate for responsive, but the 'gotcha' I ran into with this example was using images as the background for the hexagon rather than solid colors.

    I see in your examples you're using solid colors which helps because you don't need to consider the image layers lining up with each other to create a seamless image even though it's 3 layers on top of each other. I'd love to see an example if you have one with images!

    I wrote this almost 2 years ago so it's in desperate need of refactor. Maybe I'll get around to it and can pull some of your work to make it truly responsive. Thanks! -John

  3. The technique also works with background images, which you can combine with SVG to create a pseudo stroke/border effect.

  4. @joeyhoer hell yeah! Nice work man.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.