使用过滤器时模糊的 CSS 过渡

Question

我正在开发一个使用 CSS 创建六边形的网站。这种技术使用变换来旋转一个盒子，使用overflow:hidden 剪裁边缘，然后在相反方向内旋转图像以使其看起来笔直并显示六边形，here's the codepen 我对其进行了修改以使其正常工作。如您所见，过渡效果很好。

我现在遇到的问题是我想在悬停时对我的设计应用灰度滤镜，但我发现我的所有过渡现在都很模糊。在 Firefox 开发版中，我看到图像和文本开始清晰，悬停时变得模糊，然后又恢复清晰。在 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

我认为我有一个解决方案。至少在我的系统中它没有被模糊。

codepen

我做了什么：

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

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;
}

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