3

My task is to create website x, with a given background image. In addition, there is a div that lives on the side of the website, and when hovered over it animates the movement of another div from the right side of the screen.

The problem is that I would like to have the background blur in the area under the div.

After some research and brainstorming I have come up with the following method of doing that:

I have my background draw on the body element. Then, I have a div that moves when another parent div is hovered over. Next, within that div I have another div which has a set width and is meant to act as a cropping mechanism over the last child, which is the same background but with a filter: blur(10px) property.

Here is what that would look like:

<div class="draws-background">
    <div class="moves-child-when-hovered">
        <div class="overflow-hidden-to-crop-child">
            <div class="draws-blurred-background-with-fixed-position" />
        </div>
        <div class="some-content-that-needs-to-be-moved" />
    </div>
</div>

Note the following: The div which acts as a crop HAS to move with the content, so that the underside can look blurred. I did get this to work 90% of the way; the blurred background works.

The problem with the code is that the blurred background moves alongside everything else, so the effect actually seems more like a section of a blurred background moving, not a div scrolling over a blurred background.

I am trying to achieve an effect similar to that of the notification bar in MacOS.

Am I approaching this problem wrong or is there some way to stop the blurred background from moving with its parent?

  • Post your CSS as well. – Phix Sep 28 '18 at 01:50
  • Include a working copy so we can tune it up a bit to better answer. :) – CodeSpent Sep 28 '18 at 01:50
  • .moves-child-when-hovered:hover .draws-blurred-background-with-fixed-position {filter:blur(10px);} .moves-child-when-hovered:hover .some-content-that-needs-to-be-moved {transform: translateX(100px); transition: 2s;} ?! – OPTIMUS PRIME Sep 28 '18 at 02:04
  • Possible duplicate of [using a div to blur an image behind it?](https://stackoverflow.com/questions/19687846/using-a-div-to-blur-an-image-behind-it) – Kaiido Sep 28 '18 at 04:09
  • Note that webkit and Edge browsers do support the [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) rule, with the `-webkit-` prefix and that for Firefox you could use some other tricks (e.g [this gist](https://github.com/AhsanE/backdrop-polyfill-chrome) is dupilcating the whole page's content into an iframe). – Kaiido Sep 28 '18 at 04:11

0 Answers0