0

Based on this very good response, I am experimenting with a responsive CSS hexagonal grid for images.

I installed the CSS identical to that on Github except for one thing: I removed media queries that would have allowed rows of hexagons longer than 3.

That said, when the grid renders, the hexagons appear and look great, but when I hover on them, the hexagon only partially fills in, as seen here: https://jsfiddle.net/p9810xdj/

I've tried checking padding and margins that I thought could be causing this empty space between the two halves, but no luck. Any clue why the hover effect is not functioning correctly: 

/*** HOVER EFFECT  **********************************************************************/
.hexIn:hover h1, .hexIn:focus h1,
.hexIn:hover p, .hexIn:focus p{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);
}
Community
  • 1
  • 1
darkginger
  • 652
  • 1
  • 10
  • 38

1 Answers1

2

I think you missed something when checking the margins!

Added this to your css:

.hex h1, .hex p {
  margin: 0;
}

And the empty spaces were gone.

Mauricio Ribeiro
  • 36
  • 3