Hexagon images odd/even CSS - html

Question

So i have a hexagonal image and when i do ng-repeat i want the result to be as follows.
The width of the container has to be 448px and the images need to be responsive.
This is what i have tried.
CodePen
HTML
<div class="hexagons">
<img src="images/hexagon5.png" alt="">
<img src="images/hexagon6.png" alt="">
<img src="images/hexagon5.png" alt="">
<img src="images/hexagon6.png" alt="">
</div>
CSS
.hexagons {
max-width: 448px;
height: 800px;
position: relative;
}
.hexagons img:nth-child(even) {
position: relative;
top: -115px;
left: 193px;
}
.hexagons img:nth-child(odd) {
position: relative;
}
The result:
Can someone please guide me through this.

Answer 1

This can be achieved by simply offsetting each even elements by half the height of the hexagon, example:
HTML
<div class="hexagons">
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
<div class="hex"></div>
</div>
CSS
.hexagons {
width: 300px;
}
.hex {
float: left;
width: 150px;
height: 100px;
}
.hex:nth-child(2n) { /* .hex:nth-child(even) works too! */
position: relative;
top: 50px; /* half of 100px */
}
Live example:
http://codepen.io/veksen/pen/GjYKBJ
Your pen corrected: http://codepen.io/veksen/pen/QKkLJg?editors=1100
Note that since images are block elements, I had to set them as blocks, and float them. The container has to be wide enough to accomodate two images (which are 256px wide). The even hexagons also needed to be shifted to the left.
Updated for responsive: http://codepen.io/veksen/pen/XjxWJo?editors=1100
Play with the percentages a bit, but you get the idea!