web-tiki / responsive-grid-of-hexagons Goto Github PK

View Code? Open in Web Editor NEW

567.0 567.0 261.0 1008 KB

CSS responsive grid of hexagons

License: Apache License 2.0

HTML 71.79% CSS 28.21%

css css-grid css3 hexagon html html-css html5 layout responsive-grid website

responsive-grid-of-hexagons's People

Contributors

Stargazers

Watchers

Forkers

aguspina makhout syntacticsugar inertialobserver moshiii overkillengine woodrush homescreenrocks sumangola asvanpelt avastamin danny-engelman vasilypolyuhovich rapidexpert casagrandabr phuthuycoding scottgago chalsea haroon-incubasys blaireaug navyayvan sekirosake pokojt ewba dog42 eric-bunch bitrot86 offtim asipple1 myclasses miguelstrife tngamemo dmv-jumbo seijee anissat michaelsalafia nancychuchu zsw12abc yumyo sferey-old chryzanthemum mce13b itskamma christinecardoso ruiii burt23 davetaz jeffjenk sanjeevks121 tearingitup786 gau1st psdes cinziaa gonzalotorreras boadster yosoft ghyse matiny ibrahimince justi amunozj mmmorrison ravekev yyp009 jonzuck mitmcdan gigacoder tkthierry goliasse efeves yliu224 apachesep nataliakuruch kristofvdw andresglx alidarrudi67 rogergcc subrahmanyabhat lakartoza sabbyjiang binodbolakhe eksana linweiwei123 alice-gxh unsilence ilovezy wyncodennn slavapas lina-li yangl6 mwilkins91 nagyist suretarget sustainablecommunitydevelopmenthub jordanwhitestephenson abdtarboush corinneearl myxbing hdclearman digitalrhizome

responsive-grid-of-hexagons's Issues

equation of margin?

@web-tiki , would you mind showing the equation of margin as below?

#categories li:nth-child(9n+6),
#categories li:nth-child(9n+7), 
#categories li:nth-child(9n+8), 
#categories li:nth-child(9n+9) {
    margin-top: -4.2%;
    margin-bottom: -4.2%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }

I've started getting into Flexbox and most recently also into Grid and was wondering if using Grid would be better suited for this project? Could it eliminate the use of media queries? Making the manipulation (adding/removing/resizing/etc) of hexagons easier? Is there a specific reason flexbox was used here?

Less hexagons on odd rows

Is it possible to flip the grid row count so the odd rows have one fewer hexagons than the even rows?

Hover states activate/conflict in IE over the full shape

The issue occurs in IE when you hover over the entire #categories li shape, including the hidden end parts. This causes issues when hovering over one hexagon to the next.

I resolved this on another pen where the hexagon was made from rectangles by reducing the rectangle height. This pen looks better but the shape doesn't look as easy to tweak for this.

No issues in Chrome/FF.

Grid not displaying on Chrome Mac 56.0.2924.87 (64-bit)

Here is a screenshot.

I'm on a MAC OS 10.11.6

The "curtains" of the hexagons do not always close perfectly

Hi,

I encountered an issue from the very beginning. Depending on the size of hexagons, the top and bottom curtains that close in the middle do NOT close perfectly.

Now, there is a gap.

But at some widths, they can also overlap.

Did you encounter this?
How can I possibly fix it?

Thank you,
Costin

Improve hover effect transition

On hexagon hover, transition transforms rather top/botom

Blurry Images

The images are slightly blurry. Really shows up if images have small text in them. Is this a necessary evil of using CSS3 tranforms with scew/rotate?

Blurry Text on hover

There is a blurry text on hover appears on chrome. Can this be fixed ?

Hexagon overflow

When hexagons become small, the text content overflows.

Increase the spacing between hexagons

Is there an easy way to increase the spacing between the hexagons?

Rotate

Hello, I'm trying to rotate them 30 degrees so they have a straight top (as per our design instructions).

However, this causes an issue like this:

What I've done there is update these rotate values:

.hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-30deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-30deg) skewY(30deg) translatez(-1px);
            transform: rotate(-30deg) skewY(30deg) translatez(-1px);
}

Note the overlapping, bad alignment and the skewed content.

Can you point me in the right path to rotating the hex and its contents accurately so they all line up but with a straight top?

Much appreciate any guidance.

Thanks.

hexagon size

hi
i want to resize the hexagon to smaller shapes and add number of hexa per row.
how to do this?
thanks.

[Question] Using the hexagrid in a div

I'm using your grid as follows:

<div id="honeycomb"><ul id="hexGrid"></ul></div>

and then dynamically append the list items with jquery like this: $("#hexGrid").append('<li class="hex"><a class="hexIn" href="#"><img src=' + data[i].photo + ' alt="" />' + '<h1>' + data[i].employee_id + '</h1><p></p></a></li>');

And even though the parent div is larger the hexGrid does not stretch as nicely as in your examples. I did not change any code and took the code from this codepen: https://codepen.io/web-tiki/pen/wWGeEM

Hopefully one of you can help me to figure this out, because it looks not so nice now :(

border instead of background color ?

Hello, Im working on a layout and I was wondering if it is possible to give the hexagons just a border, with no background color. Thanks!

Hover effect won't close

I have a problem with the hover of the tiles as seen on the picture.

What can I do about it?

border

hi
thanks a lot for this plugin.
i have a question???
can i set a border for hexa shapes?
a think like :
http://jamepush.ir/views/site/e.jpg
set a border and remove spaces.

Height of Hexagon

Hi,
in the customization section in the readme their is a formula for setting the vertical space. In this formula you have to use the height of the hexagon:

1/2 height of hexagon

Where do i find the height of the hexagon? In the css there is only a selector for the a tag inside the hexagon with height: 100%

Did you use scss or sass to generate the css file? If yes, it would be great if you could share those files too.

Thank you for your work and help!

Border and/or Shadow

I have tried adding a box-shadow / border to the hexagons and understand this is probably not the simplest task to achieve. Any chance you can figure out how to do this or edit the documentation?

Fixed height and width hexagons

Hi folks! Firstly, thank you for open sourcing this - it is super helpful. There aren't too many resources combining hexagon and images.

Just one question - for my usecase, I was using your technique of displaying the image in a hexagon without the grid feature. I needed to specify a fixed width and height for the image. So, for my example I specifed the width and height both as .hex as 128px. However, I noticed that .hexIn and the image exceed those sizes (apart from the sizing, image displays great).

Here is a screenshot:

Any ideas on how might I achieve with the markup and styling that you provide?

Thank you!

Hover effect broken

This issue may not occur to all of you. It happens to me because of my particular case, I modified the breakpoints a bit to suit my case better. But now the problem is; the hover effect does not work in the mobile version (and other device sizes).

You can find the issue on devgroup.se
I'm not sure if it is something you want to work on? I plan to look into it myself when I have time, I will post a solution when I do, if I do for you guys.

Indentation on first row and how to increase the space between hexagons

Hi guys,

Thanks for sharing the script.
Is it possible to have the indentations starting on the first row instead of the second row?
I also don't know how to change the space between the hexagons.
Can you help me?

Thanks in advance!

Small jitter in on grid hover

small movment on grid-item hover

There is a small movment on the image when hovering a grid item.

Above preview browser: Firefox 43.
Not present in Chrome 47.
Edge: (surprisingly) not in Edge 20.

Hexagon area question or so...?

.hexLink {
background: red;
}

Just add this code and see what happened (some time you can see red color). It seems like hexagons not "pixel perfect".

How to make hexagons flat-topped

Hi,

This is a very cool bit of code here. But I am wondering how to make the calculations work so that the hexagons are actually flat-topped (horizontal) rather than pointed upward (vertical). I can't seem to adjust the rotations in a way to make this work.

Rotating the .hex div will change the hexagon's orientation, but getting everything inside the .hexLink div to look right is the tricky part...

On android phone externals hexagons not clickables

Hello,

On my Android mobile, with hexagons displaying in lines 2+1+2+1
I can only click the hexagon alone on his line.
The ones who are 2 per line can't be clicked.

Could You check that please ?

Thank You

OIO

Is this repo still maintained?

I've been working a lot with CSS grid and I'm considering to make some contributions in the future to make the code more flexible when changes are needed and relying more an stuff like calc() which might help resolve issues like #35 and custom css properties

Responsive grid of hexagons not working with Cold fusion header/footer on site

I have adjusted hexagon code to fit desired design for my project and migrated the hexagon html/css into my project website code that is using Cold Fusion/bootstrap. When I test hexagon in project website, I see that hexagon hover "shutter" will not completely close and font color on hover "shutter" has changed to grayish color. It appears there is conflict between website css and hexagon css? What do you suggest? Please help

HTML

<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

      <head>
	<cfinclude template="/head.cfm">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/hexgrid1.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
</head>

<body>
<cfinclude template="/header.cfm">
<div class="main">
     <div class="introduction">
          <div class="container">
			<h1>Resources</h1>
		</div>
	</div>
    <ul id="hexGrid">
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/hiv/">
            <img src="../images/shadowblue/hiv shadow.jpg" alt="hiv" />
            <h1>HIV</h1>
            <p>HIV Resources</p>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/prep/">
            <img src="../images/shadowblue/prep shadow.jpg" alt="prep" />
            <h1>PrEP</h1>
            <p>PrEP Resources</p>
          </a>
        </div>
      </li>
            <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/hcv/">
            <img src="../images/shadowblue/hcv shadow.jpg" alt="hcv" />
            <h1>HCV</h1>
            <p>HCV Resources</p>
          </a>
        </div>
      </li>
            <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/std-resources/">
          
            <img src="../images/shadowblue/std shadow.jpg" alt="std" />
            <h1>STD</h1>
            <p>STD Resources</p>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/echo/">
            <img src="../images/shadowblue/echo shadow.jpg" alt="echo" />
            <h1>ECHO</h1>
            <p>ECHO Resources</p>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/clinical resources/">
            <img src="../images/shadowblue/clinical shadow.jpg" alt="clinical resources" />
            <h1>CEI Clinical</h1>
            <p>CEI Clinical Resources</p>
          </a>
        </div>
      </li>
            <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/substance use/">
            <img src="../images/shadowblue/substance shadow.jpg" alt="substance" />
            <h1>Substance Use</h1>
            <p>Substance Use Resources</p>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/ai/">
            <img src="../images/shadowblue/ai shadow.jpg" alt="ai" />
            <h1>AIDS Institute</h1>
            <p>AIDS Institute Resources</p>
          </a>
        </div>
      </li>
      <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/resources/other/">
            <img src="../images/Shadowblue/other shadow.jpg" alt="other" />
            <h1>Other</h1>
            <p>Other Resources</p>
          </a>
        </div>
      </li>
            <li class="hex">
        <div class="hexIn">
          <a class="hexLink" href="https://ceitraining.org/sp2/index.cfm?action=home.tutorials&section_id=0">
            <img src="../images/shadowblue/tour shadow1.jpg" alt="tour" />
            <h1>Tour</h1>
            <p>MyCEI Tutorial</p>
          </a>
        </div>
      </li>
     <img src="../images/medi folks.jpg" alt="tour" />
    </ul>	
		</div>
                </div>
                                </div>
                               
                               
                            <!--- CONTENT END --->
                        </div>
                    </div>
                </div>
            </div>
            <cfinclude template="/footer.cfm">
    </body>

    </html>

CSS

* {
    margin: 0;
    padding: 120;
}
body {
    background: rgb(667, 667, 667);
}
#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 88.2%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-90deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-90deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}

.hex h1, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  background-color: rgba(0, 75, 226, 0.8);
  font-weight: 300;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
  bottom: 50%;
  padding-top:50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.hex p {
  top: 50%;
  padding-bottom:50%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}


/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
  #hexGrid{
    padding-bottom: 4.4%
  }
  .hex {
    width: 25%; /* = 100 / 5 */
  }
  .hex:nth-child(7n+1){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
  #hexGrid{
    padding-bottom: 5.5%
  }
  .hex {
    width: 25%; /* = 100 / 4 */
  }
  .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{
    padding-bottom: 7.4%
  }
  .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-bottom: 11.2%
  }
  .hex {
    width: 50%; /* = 100 / 3 */
  }
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}

How to Replace images? <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />

When I attempt to replace images in hexagon (in responsive grid code) with images from my local file directory, the hexagon no longer will display in browser. What can I do to overcome this issue?
Thank you
GFiggins

Show h1 underneath image

Hi - thank you so much for posting this! I'm trying to customize it, and I'd like the h1 to always display below each hexagon, rather than sliding up in the middle on hover.
I have it placed where I want and removed the animation, but because of the overflow: hidden property of the elements that contain it, the text is entirely invisible when moved outside the hexagon. Is there a way you'd recommend getting it to show up?