Filtre kullanırken bulanık CSS geçişleri

Question

Altıgenler oluşturmak için CSS kullanan bir sitede çalışıyorum. Bu teknik, bir kutuyu döndürmek için bir dönüşüm kullanır, kenarları overflow:hidden kenarlarını kullanır ve ardından görüntüyü düz olarak görünecek şekilde ters yönde döndürür ve altıgen, here's the codepen çalışmasını sağlamak için değiştirdim. Gördüğünüz gibi geçişler gayet iyi çalışıyor.

Karşılaştığım sorun şu ki, tasarımımda gezinmek üzere gri tonlamalı bir filtre uygulamak istiyorum ve tüm geçişlerimin bulanık olduğunu görüyorum. Firefox Dev Edition'da görüntünün ve metnin keskin bir şekilde göründüğünü görüyorum, vurgulu olarak bulanıklaşın, sonra da keskinliğe geri dönün. Chrome’a baktığımızda her şey bulanık, vurgulu ya da değil. Burada http://codepen.io/anon/pen/MwgebO

düzeltebilirim nasıl bir fikir konuyu görebilirsiniz

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

?

Answer 1

Sanırım bir çözümüm var. En azından sistemimde bulanık değil.

codepen

Ben ne yaptım:

1) Önemli: Resim yeniden ölçeklemek görüntülenen ediliyordu. Doğal çözünürlük 500x500, ancak 480px genişliğinde atanır. Görüntüyü keskin

2 2) Gri tonlamalı hale getirme konusunda yardımcı olmuyor. Karışım modu sonuçlar verecek şekilde görüntü çıkarılır filtre ve eklenen karışım modu

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

Şimdi, biz kap

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

beyaz arka plan gerekir ve bunun üzerine geçiş ayarlayın.

Şimdi, gri tonlama filtrenin fadeout için, tek ihtiyacımız harman modları için konteynerin şeffaf

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

Destek yapmaktır daha fazla veya filtrelere daha az eşdeğeri.