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/
Mathematically, the hexagon has 6 sides - what makes this particular shape so interesting is that the hexagonal shape best fills a plane with equal size units and leaves no wasted space.
Here is the demo and the repositery for the responsive grid of hexagons. The code here isn't maintained. It was moved to github and improved so comments, issue reporting and contributions should be made there.
This technique uses :
<img>
tag<li>
tag and an <a>
tagoverflow:hidden;
nth-child()
to space the hexagons in a regular patternAnd more to create the hexagon grid with the <img>
tag.
The following snippet isn't the latest version of the grid. The GitHub repo is maintained and up to date. Issues and contributions can be made there.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', arial, sans-serif;
background: rgb(123, 158, 158);
}
#hexGrid {
overflow: hidden;
width: 90%;
margin: 0 auto;
padding:0.707% 0;
}
#hexGrid:after {
content: "";
display: block;
clear: both;
}
.hex {
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
.hex * {
position: absolute;
visibility: visible;
}
.hexIn {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* HEX CONTENT */
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
.hex h1, .hex p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 128, 128, 0.8);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
.hex h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1.5em;
padding-top: 100%;
padding-bottom: 100%;
}
.hex h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}
.hex p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}
/* HOVER EFFECT */
.hexIn:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}
.hexIn:hover p {
top: 50%;
padding-top: 10%;
}
/* SPACING AND SIZING */
@media (min-width:1201px) {
.hex {
width: 19.2%; /* = (100-4) / 5 */
padding-bottom: 22.170%; /* = width / sin(60deg) */
}
.hex:nth-child(9n+6),
.hex:nth-child(9n+7),
.hex:nth-child(9n+8),
.hex:nth-child(9n+9) {
margin-top: -4.676%;
margin-bottom: -4.676%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(9n+6):last-child,
.hex:nth-child(9n+7):last-child,
.hex:nth-child(9n+8):last-child,
.hex:nth-child(9n+9):last-child {
margin-bottom: 0;
}
.hex:nth-child(9n+6) {
margin-left: 0.5%;
clear: left;
}
.hex:nth-child(9n+10) {
clear: left;
}
.hex:nth-child(9n+2),
.hex:nth-child(9n+ 7) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(9n+3),
.hex:nth-child(9n+4),
.hex:nth-child(9n+8) {
margin-right: 1%;
}
}
@media (max-width: 1200px) and (min-width:901px) {
.hex {
width: 24.25%; /* = (100-3) / 4 */
padding-bottom: 28.001%; /* = width / sin(60deg) */
}
.hex:nth-child(7n+5),
.hex:nth-child(7n+6),
.hex:nth-child(7n+7) {
margin-top: -6.134%;
margin-bottom: -6.134%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(7n+5):last-child,
.hex:nth-child(7n+6):last-child,
.hex:nth-child(7n+7):last-child {
margin-bottom: 0;
}
.hex:nth-child(7n+2),
.hex:nth-child(7n+6) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(7n+3) {
margin-right: 1%;
}
.hex:nth-child(7n+8) {
clear: left;
}
.hex:nth-child(7n+5) {
clear: left;
margin-left: 0.5%;
}
}
@media (max-width: 900px) and (min-width:601px) {
.hex {
width: 32.666%; /* = (100-2) / 3 */
padding-bottom: 37.720%; /* = width / sin(60) */
}
.hex:nth-child(5n+4),
.hex:nth-child(5n+5) {
margin-top: -8.564%;
margin-bottom: -8.564%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(5n+4):last-child,
.hex:nth-child(5n+5):last-child {
margin-bottom: 0;
}
.hex:nth-child(5n+4) {
margin-right: 1%;
margin-left: 0.5%;
}
.hex:nth-child(5n+2) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(5n+6) {
clear: left;
}
}
@media (max-width: 600px) {
.hex {
width: 49.5%; /* = (100-1) / 2 */
padding-bottom: 57.158%; /* = width / sin(60) */
}
.hex:nth-child(3n+3) {
margin-top: -13.423%;
margin-bottom: -13.423%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(3n+3):last-child {
margin-bottom: 0;
}
.hex:nth-child(3n+3) {
margin-left: 0.5%;
}
.hex:nth-child(3n+2) {
margin-left: 1%;
}
.hex:nth-child(3n+4) {
clear: left;
}
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
</ul>
The grid adapts the number of hexagons per row according to the viewport width from 5 on screens wider than 1200px to 2 on screens narrower than 600px.
If you don't need the media queries but just want to change the number of hexagons per row, you can keep the CSS from the corresponding media query and remove the unneeded ones.
For more customization, see sizing and spacing of hexagons.
For a list of all the demos, see this codepen collection: Responsive grids of hexagons with different numbers of hexagons per row, centering options and more...
Here is the original codepen demo with the .pusher
element to make an irregular grid of hexagons. The .pusher
element is used to make the "holes" in the grid with empty hexagons.
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/
you can use vertical-padding
in %
+ pseudo element to draw a square to begin with.
Then , use a second element to draw a mask.
DEMO
HTML
<div class="hex">
<img src="image100x120">
</div>
CSS
<!--language:css-->
.hex {
position:relative;
margin:auto;
text-align:center;
overflow:hidden;
white-space:nowrap;
display:table;
}
.hex:before {
content:'';
padding-top:120%;
display:inline-block;
vertical-align:middle;
}
.hex:after {
content:'';
position:absolute;
top:0%;
left:-10%;
width:120%;
padding-top:120%;
transform: rotatex(45deg) rotate(45deg);
text-align:center;
box-shadow:0 0 0 200px white;;
}
.hex img {
display:inline-block;
vertical-align:middle;
margin:0 -10px;
}
You can create an image with transparent hexagon shape and superimpose it over injected image.
HTML:
<div class="hexagon">
<!-- get the image -->
<img src="injected.jpg" />
<!-- apply hexagon shape to it -->
<img src="transparentHex.png" />
</div>
CSS:
.hexagon {
position: relative;
}
.hexagon > img {
position: absolute;
}
Demo: http://jsfiddle.net/dr6Hp/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%;
}
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;
}
A pure CSS responsive hexagon grid. It relies on clip-path
to create the main shape and shape-outside
to make sure we have the correct indentation:
.main {
display:flex;
--s: 100px; /* size */
--m: 4px; /* space */
}
.container {
font-size: 0; /*disable white space between inline block element */
}
.container div {
width: var(--s);
margin: var(--m);
height: calc(var(--s)*1.1547); /* = 1/cos(30) */
display: inline-block;
font-size:initial;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: red;
margin-bottom: calc(var(--m) + var(--s)*-0.2885); /* = tan(30)/2 */
}
.container div:nth-child(odd) {
background:green;
}
.container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 100%;
--r:calc(var(--s)*3*1.1547/2 + 4*var(--m) - 2px);
shape-outside:
repeating-linear-gradient(
transparent 0 calc(var(--r) - 3px),
#fff 0 var(--r));
}
<div class="main">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
Related to get more details: responsive hexagon grid without media query
Check out this responsive hexagonal grid that is implemented with AngularJS.
<div class="wrapper">
<section class="hex-grid">
<div
ng-repeat="item in app.items"
class="grid-item repeat-animation">
<div class="inner">
<div
class="inner-inner"
ng-style="{ 'background-image': 'url({{ item.imgSrc }})' }">
<a
href=""
class="grid-info">
<div class ="inner-text">
<div class="inner-text-inner">
<h2>{{ item.name }}</h2>
<p>{{item.desc }}</p>
</div><!-- /.inner-text-inner -->
</div><!-- /.inner-text -->
</a><!-- /.grid-info -->
</div><!-- /.inner-inner -->
</div><!-- /.inner -->
</div><!-- /.grid-item -->
</section><!-- /.hex-grid -->
</div><!-- /.wrapper -->
.hex-grid {
position: relative;
width: 80%;
left: 10%;
padding-top: 120px;
}
@media (max-width: 767px) {
.hex-grid {
width: 100%;
left: 0;
}
}
.hex-grid .grid-item {
position: relative;
display: inline-block;
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
@media (max-width: 633px) {
.hex-grid .grid-item {
width: 222%;
margin: 0 -61%;
margin-bottom: 10px;
}
}
@media (min-width: 634px) and (max-width: 1022px) {
.hex-grid .grid-item {
width: 133%;
margin: 0 -42%;
margin-bottom: -25%;
}
.hex-grid .grid-item:nth-child(2),
.hex-grid .grid-item:nth-child(4),
.hex-grid .grid-item:nth-child(6),
.hex-grid .grid-item:nth-child(8),
.hex-grid .grid-item:nth-child(10),
.hex-grid .grid-item:nth-child(12),
.hex-grid .grid-item:nth-child(14),
.hex-grid .grid-item:nth-child(16),
.hex-grid .grid-item:nth-child(18),
.hex-grid .grid-item:nth-child(20),
.hex-grid .grid-item:nth-child(22),
.hex-grid .grid-item:nth-child(24),
.hex-grid .grid-item:nth-child(26),
.hex-grid .grid-item:nth-child(28),
.hex-grid .grid-item:nth-child(30) {
margin-top: 28%;
}
.hex-grid .grid-item:nth-child(3),
.hex-grid .grid-item:nth-child(5),
.hex-grid .grid-item:nth-child(7),
.hex-grid .grid-item:nth-child(9),
.hex-grid .grid-item:nth-child(11),
.hex-grid .grid-item:nth-child(13),
.hex-grid .grid-item:nth-child(15),
.hex-grid .grid-item:nth-child(17),
.hex-grid .grid-item:nth-child(19),
.hex-grid .grid-item:nth-child(21),
.hex-grid .grid-item:nth-child(23),
.hex-grid .grid-item:nth-child(25),
.hex-grid .grid-item:nth-child(27),
.hex-grid .grid-item:nth-child(29) {
clear: left;
}
}
@media (min-width: 1023px) and (max-width: 1599px) {
.hex-grid .grid-item {
width: 91.6%;
margin: 0 -29.2%;
margin-bottom: -17.5%;
}
.hex-grid .grid-item:nth-child(2),
.hex-grid .grid-item:nth-child(5),
.hex-grid .grid-item:nth-child(8),
.hex-grid .grid-item:nth-child(11),
.hex-grid .grid-item:nth-child(14),
.hex-grid .grid-item:nth-child(17),
.hex-grid .grid-item:nth-child(20),
.hex-grid .grid-item:nth-child(23),
.hex-grid .grid-item:nth-child(26),
.hex-grid .grid-item:nth-child(29) {
margin-top: 19%;
}
.hex-grid .grid-item:nth-child(4),
.hex-grid .grid-item:nth-child(7),
.hex-grid .grid-item:nth-child(10),
.hex-grid .grid-item:nth-child(13),
.hex-grid .grid-item:nth-child(16),
.hex-grid .grid-item:nth-child(19),
.hex-grid .grid-item:nth-child(22),
.hex-grid .grid-item:nth-child(25),
.hex-grid .grid-item:nth-child(28) {
clear: left;
}
}
@media (min-width: 1600px) {
.hex-grid .grid-item {
width: 66.7%;
margin: 0 -20.9%;
margin-bottom: -12.5%;
}
.hex-grid .grid-item:nth-child(2),
.hex-grid .grid-item:nth-child(4),
.hex-grid .grid-item:nth-child(6),
.hex-grid .grid-item:nth-child(8),
.hex-grid .grid-item:nth-child(10),
.hex-grid .grid-item:nth-child(12),
.hex-grid .grid-item:nth-child(14),
.hex-grid .grid-item:nth-child(16),
.hex-grid .grid-item:nth-child(18),
.hex-grid .grid-item:nth-child(20),
.hex-grid .grid-item:nth-child(22),
.hex-grid .grid-item:nth-child(24),
.hex-grid .grid-item:nth-child(26),
.hex-grid .grid-item:nth-child(28),
.hex-grid .grid-item:nth-child(30) {
margin-top: 14%;
}
.hex-grid .grid-item:nth-child(5),
.hex-grid .grid-item:nth-child(9),
.hex-grid .grid-item:nth-child(13),
.hex-grid .grid-item:nth-child(17),
.hex-grid .grid-item:nth-child(21),
.hex-grid .grid-item:nth-child(25),
.hex-grid .grid-item:nth-child(29) {
clear: left;
}
}
.hex-grid .grid-item .inner {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hex-grid .grid-item .inner .inner-inner {
-webkit-transform-style: preserve-3d;
/* Chrome, Safari, Opera */
transform-style: preserve-3d;
visibility: visible;
overflow: hidden;
width: 100%;
padding-bottom: 40%;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
background-repeat: no-repeat;
background-size: 50%;
-webkit-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
background-position: 50%;
}
@media (min-width: 1100px) {
.hex-grid .grid-item .inner .inner-inner {
padding-bottom: 40%;
}
}
.hex-grid .grid-item .inner .inner-inner:hover {
background-size: 60%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
padding: 10%;
background: #ffffff;
color: #000000;
text-decoration: none;
text-align: center;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hex-grid .grid-item .inner .inner-inner .grid-info:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text {
display: table;
position: relative;
height: 100%;
width: 46%;
left: 27%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text .inner-text-inner {
display: table-cell;
vertical-align: middle;
}
.hex-grid .grid-item .inner .inner-inner {
-webkit-backface-visibility: hidden;
}
.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
/* 100ms will be applied between each sucessive enter operation */
-moz-transition-delay: 0.1s !important;
-webkit-transition-delay: 0.1s !important;
transition-delay: 0.1s !important;
/* this is here to avoid accidental CSS inheritance */
-webkit-transition-duration: 0 !important;
transition-duration: 0 !important;
}
.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
-moz-transition: 0.2s ease-in-out all;
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;
}
.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
-moz-transition: 0.2s ease-in-out all;
-webkit-transition: 0.2s ease-in-out all;
transition: 0.2s ease-in-out all;
opacity:0;
}
.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
opacity:1;
}
'use strict';
(function() {
/**
* Declares the app module.
*/
angular
.module( 'app', [ 'ngAnimate' ] );
//...
Original: http://rachidmrad.com/
All the credit goes to Mr. Rachid Mrad, he is an awesome web designer.
https://github.com/mnishiguchi/hexagonal_grid
instead of using class in img tag use css in container img like
.container img{ your code}
it will save you a lot trouble of putting class in images
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With