悬停效果并不完全覆盖我的六边形网格中的元素

Question

基于此very good response，我正在尝试使用响应式CSS六边形网格进行图像处理。

我安装了与on Github except完全相同的CSS：我删除了允许六行长于3行的媒体查询。

也就是说，当网格呈现时，六边形看起来很棒，但是当我将它们悬停在它们上面时，六边形只会部分填充，如下所示：https://jsfiddle.net/p9810xdj/

我已经尝试检查填充和边距，我认为这可能导致两半之间的这个空白空间，但没有运气。任何关于悬停效果无法正常运作的线索：

/*** 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);
}

Answer 1

我认为你在查看边距时错过了一些东西！

将此添加到您的css：

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

空的空间消失了。