Responsive grid of hexagons

Question

I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid?

<div>
    <img src="link" class="Image">
</div>

<div>
    <img src="link" class="Image">
</div>
...

I found multiple ways to do this but you needed to fill in the image src in the CSS code. This isnt possible for me cause the website loads in random images from the internet with jQuery so I can't use background images.

I tried this: http://jsfiddle.net/8f5m5wv0/

Answer 1

Alright, here's a clean, cross-browser compatible solution that will even allow you to honeycomb the hexagons:

For this to work, you need to wrap each image in 2 containers, since one will be used for the top left / bottom right cut-off and the other for the top right / bottom left cut-off.

<div class="outerclip">
    <div class="innerclip">
        <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
    </div>
</div>

The CSS then gives each cut-off container a skew that adds the angles to the image:

.outerclip {
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -transform: skew(-30deg);
    overflow: hidden;
    display: inline-block;
}
.innerclip {
    -webkit-transform: skew(50deg);
    -ms-transform: skew(50deg);
    transform: skew(50deg);
    overflow: hidden;
    display: inline-block;
}
img {
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}

Demo: http://jsfiddle.net/XkQtF/3/

Note: to improve the render quality, I'd advise to give both .outerclip and .innerclip the same fixed height.

To get the honeycombs, you can put several images in a row container and then offset each odd row by a couple of pixels like this:

Demo: http://jsfiddle.net/XkQtF/4/

Answer 2

TRY THIS FIDDLE

http://jsfiddle.net/ku860uoh/

<div class="hex one">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

    <div class="hex two">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

CSS

BODY {
    background: url(http://placekitten.com/600/600);
}
.hex {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
    }
.images1{
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.images2{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/238/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.images2:hover {
    background-image: url(http://placekitten.com/440/242);
    }

.one {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    }
.two {
    width: 200px;
    height: 400px;
    margin: -80px 0 0 20px;
    }

Answer 3

Demo

HTML:

<div class="hexagon">
  <div class="contents"></div>
</div>

SASS (with Compass):

$width: 400px;
$fillColor: #CCC;
$height: $width*sin(60deg);
.hexagon {
  display: inline-block;
  position: relative;
  width: $width;
}
.hexagon:before, .hexagon:after {
  content: '';
  display: block;
  width: 50%;
  border: 0 solid transparent;
}
.hexagon:before {
  border-bottom-color: $fillColor;
  border-width: 0 $width/4 $height/2;
}
.hexagon:after {
  border-top-color: $fillColor;
  border-width: $height/2 $width/4 0;
}
.hexagon > .contents {
  position: absolute;
  top: 0; bottom: 0;
  left: 25%; right: 25%; 
}

Then, if you want to place an image in the hexagon, inside .contents use

<img id="myimg" src="foo" />

and, for example, style it like this:

#myimg {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0; 
  margin: auto;
  width: 50%;
}