CODEWITHSUNDEEP
cssfiltermodal-dialog
skl_dev
skl_dev

Reputation: 1

Upon opening a modal window, make the background blur rather than going black

I've created a simple modal window (with help) and I understand how it functions to make the background dark after clicking the corresponding link. I can't quite seem to figure out how to make the background-image that I currently have become blurry upon clicking, however. I was hoping to do it fully in css.

Here is what I have so far. What I want the background-image to look like is achieved by using filter: blur(5px);

I think the issue is relating to the fact that I don't entirely understand how the :target function works.

/* Design Modal Window */
/* .modal_style {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px black;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
} */

Essentially instead of background: rgba(0, 0, 0, 0.8); I want the background to blur, but when I put the filter element in its place it blurs the modal window and not the background.

Upvotes: 0

Views: 1947

Answers (1)

oemera
oemera

Reputation: 3453

You can't use blur on the parent, and disable it on the child. You have to create two divs on the same level. Here is an example:

.modal-content{
  height:150px;
  width:200px;
  position: absolute;
  background-color:white;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.modal-background{
  filter:blur(5px);
  position:absolute;
  width:100%;
  height:100%;
}
<div class="modal-background">
  <image src="https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962_960_720.jpg"></image>
</div>
<div class="modal-content">
This a  modal
</div>

Upvotes: 1

Related Questions