Responsive Hexagon Grid In Pure CSS

Category: CSS & CSS3 , Layout , Recommended | June 15, 2016
Author: web-tiki
Views Total: 7,230
Official Page: Go to website
Last Update: June 15, 2016
License: MIT

Preview:

Responsive Hexagon Grid In Pure CSS

Description:

A pure CSS solution to render a fully responsive hexagon grid layout with fancy mouse hover effects in your html page.

See also:

How to use it:

Just include the core style sheet hexagons.css in the header of your html document and you’re ready to go.

<link rel="stylesheet" href="hexagons.css">

Create a hexagon grid with custom images, titles and descriptions as follows:

<ul id="hexGrid">
  <li class="hex">
    <a class="hexIn" href="#">
        <img src="1.jpg" alt="">
        <h1>This is a title 1</h1>
        <p>This is description 1</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
        <img src="2.jpg" alt="">
        <h1>This is title 2</h1>
        <p>This is description 2</p>
    </a>
  </li>
  <li class="hex">
    <a class="hexIn" href="#">
        <img src="3.jpg" alt="">
        <h1>This is title 3</h1>
        <p>This is description 3</p>
    </a>
  </li>
</ul>

That’s it.  Override and modify the CSS rules in the hexagons.css to create your own styles.

You Might Be Interested In:


One thought on “Responsive Hexagon Grid In Pure CSS

Leave a Reply