Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Add Overlay Color With Centered Text

I am trying to achieve following:

Add overlay color to Shortcode element in WP with centered Text.

When user hovers over this overlay color and text must be hidden.

I tried lots of variantsannd this one nearly works, but it’s not showing text:

#image-map-pro-2380 > div > div.imp-ui{
        max-width: 100%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        outline: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        color: #FFF;
        z-index: 9999;
        position: absolute;
        opacity: 0.7;
        content: "OUT OF STOCK";
}

Also another problem is that when using

:hover {
   display:none;
}

overlay color starts blinking not hiding.

Any suggestions?

Tags:

2

Answers


  1. 0

    Try these

    :hover {
   display:none;
}
:focus {
   display:none;
}

    JAVASCRIPT

    document.getElementById("").disabled = true;
    Login or Signup to reply.
  2. 0

    I don’t know, if this is what you want but let me show u this code it doesnt make the text disappear

       

 

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    

    #overlay {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 2;
      cursor: pointer;
    }
    </style>
    </head>
    <body>

    <div id="overlay" onclick="off()"></div>

    <div style="padding:20px">
      <h2>Overlay</h2>
      <p>Add an overlay effect to the page content (100% width and height with a black background color with 50% opacity).</p>
      <button onclick="on()" id="btn" >Turn on overlay effect</button>
    </div>

    <script>
    function on() {
      document.getElementById("overlay").style.display = "block";
    }

    function off() {
      document.getElementById("overlay").style.display = "none";
    }
    </script>

    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search