JSFiddle - React, Tailwind, and code Playground

HTML

<!-- content to be placed inside <body>…</body> -->

<div class='row'>
  <div class='hexagon'></div>
</div>

<div class='row'>
  <div class='hexagon'></div>
  <div class='hexagon'></div>
</div>

<div class='row'>
  <div class='hexagon'></div>
</div>

<div class='row'>
  <div class='hexagon'></div>
  <div class='hexagon'></div>
</div>

<div class='row'>
  <div class='hexagon'></div>
</div>

CSS

/**
 * Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
 * http://stackoverflow.com/q/10062887/1397351
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.row {
  margin: -18% 0;
  text-align: center;
}
.row:first-child {
  margin-top: -20%;
}
.hexagon, .hexagon-hide {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0 8.5%;
  padding: 16%;
  transform: rotate(30deg) skewY(30deg) scaleX(.866);
  /* .866 = sqrt(3)/2 */
}
.hexagon:before, .hexagon-hide:before,
.content:after {
  display: block;
  position: absolute;
  /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
  top: 6.7%;
  right: 0;
  bottom: 6.7%;
  left: 0;
  /* 6.7% = (100% -86.6%)/2 */
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
  /* 1.155 = 2/sqrt(3) */
  background-color: rgba(30, 144, 255, .56);
  background-size: cover;
  content: '';
}
t:after {
  content: attr(data-content);
}
.row:first-child .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:nth-child(2):before {
  background-image: url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.row:nth-child(3) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:nth-child(2):before {
  background-image: url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.row:nth-child(5) .hexagon:first-child:before {
  background-image: url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}




.row:first-child .hexagon-hide:first-child:before {
  background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(2) .hexagon-hide:nth-child(2):before {
 ...

JavaScript

$( ".hexagon" ).click(function() {
  $( this ).toggleClass('hexagon hexagon-hide');
});