0

I'm trying to do some website with react library. But to finalize that nicely I don't know how to change CSS properties wchich depends from other. For example I don't want this blur filter in my text area .mirror-container what is used in background .home-header

Here is the code:

.home-header {
    height: 55vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    z-index: -1;
    background: url("./assets/images/bg.jpeg") ;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(3px);
    background-position-y: 80%;
}
.mirror-container {
    width: 50rem;
    height: 85%;
    box-shadow: 0 5px 25px rgba(0,0,0, .5);
    color: #000;
    margin-top: 8rem;
    border-top: 1px solid white;
    border-right: 1px solid white;  // HERE NEED TO BE WITHOUT BLUR 
}

Also I want to ask how to add some shadow on the end of picture. I mean something like that to make smoothly changing the backgrounds. Or maybe I should import a shadow wave png and insert it below the image? What would be the best solution?

Regards.

Daniel Gola
  • 39
  • 8

1 Answers1

0

Your question about the blur value of the filter CSS property has been asked here before.

In short, filter, like other CSS properties such as opacity applies all the way down the affected DOM subtree, so you can't prevent the child element (.mirror-container) from being affected by the blurring effect defined in the parent element (.home-header).

A viable alternative would be to add an element in between the two that covers the .home-header element, and apply a backdrop-filter: blur(3px) to that element instead.

The backdrop-filter CSS property only applies the filter to the area behind the affected element, so you'll see the blurring effect over .home-header butl still see the content inside .mirror-container as expected.

Pato
  • 1
  • 1
  • 1