Si uso la propiedad de filter css en el elemento principal, también afectará al elemento secundario. Quiero evitar que el niño no tenga efecto cuando configuro el filter de propiedad en el padre.
article { width: 300px; height: 300px; position: relative; } article:hover { filter: contrast(110%); } img { width: 300px; height: 300px; } div { width: 200px; height: 50px; background: #FCDBA3; position: absolute; bottom:0; } <article> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" /> <div></div> </article>Si te diste cuenta con cuidado! Puede ver cuando paso el mouse sobre el artículo y la etiqueta div también afecta debido a la propiedad de filtro. Pero no quiero que el div se vea afectado cuando paso el cursor sobre el artículo.
¿Cómo puedo lograrlo?
Por lo que entendí, desea hacer un efecto de desplazamiento en la etiqueta del artículo, pero excluyendo el elemento div para eso, puede usar esto
article :not(div):hover{ filter: contrast(110%); }en vez de
article:hover { filter: contrast(110%); }Siempre puede usar backdrop-filter en un pseudo elemento, luego un poco de índice z y puede crear una clase que esté por encima del filtro de fondo. Vea el ejemplo, cualquier elemento con una clase .noFilter no se verá afectado al pasar el mouse
article { padding: 2rem; overflow: hidden; position: relative; } article::before { backdrop-filter: contrast(100%); content: ""; display: block; position: absolute; inset: 0; z-index: 3; transition: backdrop-filter 500ms 0ms ease-in-out; } img { height: auto; width: auto; min-height: 100%; min-width: 100%; position: absolute; inset: 50%; transform: translate(-50%, -50%); z-index: 1; } div { background: #FCDBA3; padding: 0.5rem; width: 200px; position: relative; z-index: 2; } .noFilter { z-index: 4; } article:hover::before { backdrop-filter: contrast(150%); } <article> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" /> <div>Some content here</div> <div>Some content here</div> <div class="noFilter">Not affected by filter</div> <div>Some content here</div> <div class="noFilter">Not affected by filter</div> <div>Some content here</div> <div>Some content here</div> </article>Además de las otras respuestas útiles, ya que técnicamente su pregunta es "¿Cómo evitar que el niño herede la propiedad de filtro de los padres?" la respuesta es que los elementos secundarios no heredan la propiedad, pero se ven afectados por ella, y no hay otra forma de evitarlo que no sea aplicar el filtro a otro elemento (como se sugiere en otras respuestas).
Para dar un ejemplo con algo similar pero más simple, si aplica la propiedad de opacity con un valor inferior a 1 a un elemento, entonces no hay forma de que ningún elemento secundario obtenga una opacidad mayor que su elemento principal.