I AM LISTENING TO
|

WHAT I LIKE

Unicode slugs with ease
CSS     Design     Development     Javascript    

Hexagons & grids do not mix … are you sure ?



18. June 2017


CSS responsive grid of hexagons allows you to easily create just that for images and some text. Nice way to present a portfolio.

  • The hexagon grid is responsive according to the width of the container (#hexGrid)
  • Hexagons keep their aspect ratio according to their width
  • The number of hexagons per row is adaptive and changes from 5 to 2 on media query break points
  • A title and short text slide in on hexagon hover and focus
  • Hexagons and can be cycled through with tab (keyboard navigation)

GitHub

 




Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz