Toggle covering a div with semi-transparent component

Question

I am wondering how to cover a <div> with some useful HTML component/image to make the <div> :

• A) Unclickable (unreachable for mouse etc)
• B) Look a little ~0.3f blur (because of it transparent foreground)
• C) make the effect dynamic I mean make the <div> covered/uncovered by some event?

So my question is: What is the optimal way to make the previously mentioned effect with HTML, CSS, and Javascript?

Answer 1

(A) Making the div "Unclickable (unreachable for mouse etc)"

This can be accomplished by using the various CSS positioning elements to place two divs in the exact same location. Then to stack one div on top of the other, use z-index (the element with the higher z-index will be stacked on top of the element with the lower z-index ). For example:

HTML:

<div id="div1">
    <a href="#">Link</a>
</div>
<div id="div2"></div>

CSS:

#div1, #div2 {
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    position: fixed;
}

#div2 {
    z-index: 1;
}

---

(B) Making the div "Look a little ~0.3f blur (because of it transparent foreground)"

To do this, you would use CSS opacity . For example:

#div2 {
    opacity: .3;
}

---

(C) "Make the effect dynamic I mean make the covered/uncovered by some event."

You can accomplish this using Javascript. The simplest approach would probably be to use document.getElementById to add display:none to the div you want to remove.

<script>
  document.getElementById('div2').style.display = 'none';
</script>

---

NOTE : These are not the only ways to accomplish this task. I am just trying to give you a launching point. I recommend reviewing the MDN links I posted and writing code that works best for what you are specifically trying to accomplish.