Create Beautiful Hexagon Shapes With CSS3, jQuery

jquery-hex-gallery which creates beautiful hexagons with a CSS3-based hex grid layout with hover comment support.

hexagon shape in html css, hexagon hover effects, hexagon animation jquery, how to make a hexagon in css, clip path hexagon jquery

Javascript Library to Show Capacity in Hex With HTML5 | Hexagon Chart

How to make use of it:

1. Include jQuery Javascript library and jQuery Hex Gallery plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.hex.gallery.js"></script>

2. Create a hexagonal grid layout for the gallery as follows.

<script type="text/hex-gallery">
{
"album" : [
{
  "cover": {"title": "<h4>THEME</h4><hr /><p>Stephanie Dola</p>", "class": "hex-1"},
  "photo": [
    {"imgur": "http://i.imgur.com/yIoACHc.gif"},
    {"imgur": "http://i.imgur.com/uINck6K.gif"},
    {"imgur": "http://i.imgur.com/zOZJEex.gif"},
    {"imgur": "http://i.imgur.com/dM7rBEt.gif"},
    {"imgur": "http://i.imgur.com/JkF9f4j.gif"},
    {"imgur": "http://i.imgur.com/7xNwFm8.gif"},
    {"imgur": "http://i.imgur.com/Fq7LYMu.gif"},
    {"imgur": "http://i.imgur.com/bgldBVE.gif"},
    {"imgur": "http://i.imgur.com/VrzMLCb.jpg"},
    {"imgur": "http://i.imgur.com/gTSDSce.gif"},
    {"imgur": "http://i.imgur.com/71pr7UK.jpg"},
    {"imgur": "http://i.imgur.com/4pzxseN.jpg"}
  ]
},
{
  "cover": {"title": "<h4>THEME</h4><hr /><p>2</p>", "class": "hex-2"},
  "photo": [
    {"imgur": "http://i.imgur.com/YSmWA3g.gif"},
    {"imgur": "http://i.imgur.com/6G4BDxU.gif"},
    {"imgur": "http://i.imgur.com/kuH4XVL.gif"},
    {"imgur": "http://i.imgur.com/0NemOhQ.gif"},
    {"imgur": "http://i.imgur.com/tedXr7Y.gif"},
    {"imgur": "http://i.imgur.com/5IHR8bQ.gif"}
  ]
},
{
  "cover": {"title": "<h4>THEME</h4><hr /><p>3</p>", "class": "hex-3"},
  "photo": [
    {"imgur": "http://i.imgur.com/vpKzynV.gif"},
    {"imgur": "http://i.imgur.com/J2Dllne.gif"},
    {"imgur": "http://i.imgur.com/kBQ8WDN.gif"},
    {"imgur": "http://i.imgur.com/ZkkYIVm.gif"},
    {"imgur": "http://i.imgur.com/FTMUcRf.gif"},
    {"imgur": "http://i.imgur.com/zE8oOpI.gif"},
    {"imgur": "http://i.imgur.com/OCfUjzv.gif"},
    {"imgur": "http://i.imgur.com/RkHRSno.gif"},
    {"imgur": "http://i.imgur.com/rctEEyS.gif"}
  ]
}
]
}
</script>

jQuery & CSS3 Based Hexagon Image Gallery, jquery-hex-gallery Plugin/Github