Responsive Hexagon Grid In Pure CSS


Author: web-tiki
Views Total: 6,425 views
Official Page: Go to website
Last Update: November 26, 2019
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 on 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.

See also  CSS3 Arrow Buttons For Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *