Semantic-UI Reveal Instant Variation

Last Updated : 28 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about Reveal Instant variation.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A reveal displays additional content in place of previous content when activated and when it is in instant variation state then how its content without delay.

Semantic-UI Reveal Instant Variation Class:

instant: This class is used for an element to show its content without delay.

Syntax:

<div class="ui instant move reveal">
...
</div>

The below example illustrates the Semantic-UI Reveal Instant variation:

Example 1: In this example we will reveal blank area.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
           rel="stylesheet" /> 
</head> 
<body> 
    <center> 
    <h1 class="ui header green">GeeksforGeeks</h1> 
    <strong> Semantic-UI Reveal Instant Variation</strong> 
    </center> 
    <div class="ui instant move reveal"> 
      <div class="visible content"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220216122335/g-100x100.png" 
             class="ui small image"> 
      </div> 
      </div> 
</body> 
</html>

Output:

Semantic-UI Reveal Instant Variation

Example 2: In this example, we will reveal an image by moving an image.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
</head> 
<body> 
    <center> 
    <h1 class="ui header green">GeeksforGeeks</h1> 
    <strong>Semantic-UI Reveal Instant Variation</strong> 
    </center> 
    <div class="ui instant move reveal"> 
      <div class="visible content"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220216122335/g-100x100.png" 
             class="ui small image"> 
      </div> 
      <div class="hidden content"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221053257/gfg2.png" 
             class="ui small image"> 
      </div> 
    </div>  
</body> 
</html>