Tengo una serie de imagenes que se muestran en escala de gris cuando el elemento tiene la clase disabled
pero dicho filtro me está aplicando también a los elementos hijos por lo que el bloque completo me aparece en gris.
.item {
background-size: cover;
width: 400px;
height: 200px;
text-align: center;
padding-top: 20px;
}
.item.disabled {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.item .status {
background-color: green;
bottom: 30px;
border-radius: 6px;
padding: 2px 5px;
color: white;
font-weight: bold;
}
.item.disabled .status {
background-color: red;
}
<div class="item" style="background-image: url(http://lorempixel.com/400/200/sports)">
<span class="status">ready</span>
</div>
<div class="item disabled" style="background-image: url(http://lorempixel.com/400/200/sports)">
<span class="status">not ready</span>
</div>
¿Como hacer para que el texto que dice "not ready" me salga en rojo y no en gris?
Segun tengo entendido la propiedad css filter no es heredable y su valor inicial es none
así que sólo debería aplicar al elemento sobre el que se encuentra.