使用过滤器时模糊的CSS转换

Question

我正在使用CSS创建六边形的网站上工作.这种技术使用变换来旋转框,剪切边缘使用overflow:hidden,然后旋转相反方向内的图像以显示直线并显示六边形,这是我修改的代码笔以使其工作.正如您所看到的,转换工作正常.

我遇到的问题是,我想在悬停到我的设计时应用灰度滤镜,我发现我的所有过渡现在都很模糊.在Firefox Dev Edition中,我看到图像和文本开始变得清晰,在悬停时变得模糊,然后又回到锐利状态.在Chrome中查看时,一切都很模糊,是否悬停.

.hexContainer {width:400px;}
#categories {overflow:hidden;width:100%;margin:0 auto; padding:0 0 1em; position: relative;}
#categories .hexBox {position:relative;list-style-type:none;width:100%;padding-bottom:115%;float:left;overflow:hidden;visibility:hidden;-webkit-transform:rotate(-60deg) skewY(30deg);-ms-transform:rotate(-60deg) skewY(30deg);transform:rotate(-60deg) skewY(30deg); z-index: 10;}
#categories .hexBox *{position:absolute;visibility:visible;}
#categories .hexBox>div{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;}
#categories .hexBox img{left:-100%;right:-100%;width:auto;height:100%;margin:0 auto;  -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out; -webkit-transform: translateZ(0); }
#categories .hexBox h3 {position: absolute; bottom: 25%; left: 2%; font-weight: 300; color: #fff; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;}
#categories .hexBox h3 strong {font-weight: 700; padding-left:.25em;}
#categories div p{width:90%;padding:0 5%;}
#categories .hexBox p{padding-top:50%;top:110%;padding-bottom:50%;}

/* hovers */
#categories .hexBox div:hover p{top:50%;padding-top:10%;}
#categories .hexBox div:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transform: translateZ(0); }
#categories .hexBox div:hover h3 {bottom:40%;}

你可以在http://codepen.io/anon/pen/MwgebO看到这个问题

关于如何解决这个问题的任何想法？

Answer 1

我想我有一个解决方案。至少在我的系统中它并不模糊。

代码笔

我做了什么：

1) 重要提示：图像正在重新缩放显示。原始分辨率 500x500，但指定宽度 480px。这无助于使显示清晰

2）改变了获取灰度的方式。从图像中删除滤镜，并添加混合模式

#categories .hexBox img{
    left:-100%;  
    right:-100%; 
    margin:0 auto;  
    mix-blend-mode: luminosity;  
    -webkit-transform: translateZ(0); 
}

现在，为了让混合模式给出结果，我们需要容器中有白色背景

#categories .hexBox>div{
    width:100%;
    height:100%;
    text-align:center;
    background-color: white; 
    transition: all 2s ease-in-out;
}

我们在其上设置了过渡。

现在，对于灰度滤镜的淡出，我们所需要做的就是使容器透明

#categories .hexBox div:hover {
    background-color: transparent;
}

对混合模式的支持或多或少相当于过滤器。