Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points
Posted by Neil Bircumshaw
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Is it possible to over right the cascade of a parent's defined properties?

So I've got a parent div with the class of KS-header-background and a child div inside it with the class of logo. The parent has on it a filter which blurs the background image. however this cascades down and blurs the logo image that is absolutely positioned on top of the background image. Is there anyway to have the background image blurred but the logo text not blurred?

Here is my SASS code for the two classes: 

.KS-header-background
  position: relative
  height: 600px
  background:
    image: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.65)), url(/images/header-background.jpg)
    size: cover
    repeat: no-repeat
    position: 50% 300%
    attachment: fixed
  filter: blur(1.8px)


.logo
  height: 100px
  width: 100%
  background:
    image: url(/images/ks_logo.svg)
    position: center
    repeat: no-repeat
  position: absolute
  top: 50%
  margin-top: -50px
  filter: none

Thanks for taking a look!

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Filtering, like opacity, isn't inherited but the effect is imposed on all child elements.

Move the logo div outside of the other one and make them siblings instead of parent/child. Then, adjust the absolute position to place it where you want.