Semantic-UI Inverted Dimmer Variation

Last Updated : 08 Mar, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Dimmer is used to hide the distractions or site content and move focus to the main content. It can be used to view important updates or notifications. Semantic UI Inverted Dimmer Variation is used to invert the colours of the dimmer. The colours inside the dimmer are also inverted.

Semantic UI Inverted Dimmer Variation Classes:

inverted: This class will invert the colours of the dimmer.

Syntax: Add the inverted class to the dimmer as follows:

<div class="ui inverted dimmer">
    ...
</div>

Example: In the following example, we have an inverted dimmer on a container.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"
    /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <style> 
      .icon { 
        margin: 16px; 
      } 
    </style> 
  </head> 
  
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> 
            GeeksforGeeks 
          </h1> 
        </div> 
        <strong> 
          Semantic UI Inverted Dimmer Variation 
        </strong> 
      </center> 
  
      <div class="ui segment" id="gfgdimmer"> 
        <div class="ui inverted dimmer" id="dimmer"> 
          <div class="content"> 
            <h3 style="color: black;"> 
              Welcome to GeeksforGeeks 
            </h3> 
  
            <br /> 
            <button class="ui red button" 
                    onclick="hideDimmer()"> 
              Hide 
            </button> 
          </div> 
        </div> 
        <div class="content"> 
          <h1>Welcome to GeeksforGeeks</h1> 
          <p>Find the best programming tutorials here.</p> 
  
          <button class="ui green button" 
                  onclick="showDimmer()"> 
            Show 
          </button> 
        </div> 
      </div> 
    </div> 
    <script> 
      const showDimmer = () => { 
        $('#gfgdimmer').dimmer('show') 
      } 
      const hideDimmer = () => { 
        $('#gfgdimmer').dimmer('hide') 
      } 
    </script> 
  </body> 
</html> 