Skip to content
Related Articles

Related Articles

Semantic-UI Reveal Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. In this article, we will discuss Reveal Variations in Semantic-UI.

Semantic-UI Reveal is used to show the additional information in place of previous information when the element is activated.

Semantic-UI Reveal Variations Class:

  • instant: This class is used to display the hidden content without any delay.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Reveal Variations by moving an image.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <link href=
       rel="stylesheet"/>
</head>
 
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2
    <h3> Semantic-UI Reveal Variations </h3>
  </div><br>
 
  <div class="ui centered card">
    <div class="ui instant move reveal">
      <div class="visible content">
        <img src=
          class="ui medium image">
      </div>
 
      <div class="hidden content">
        <img src=
          class="ui medium image">
      </div>
    </div>
  </div>
</body>
 
</html>


Output:

Semantic-UI Reveal Variations

Semantic-UI Reveal Variations

Example 2: The following code demonstrates the Semantic-UI Reveal Variations by rotating an image.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <link href=
        rel="stylesheet"/>
</head>
 
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2
    <h3> Semantic-UI Reveal Variations </h3>
  </div><br>
 
  <div class="ui centered card">
    <div class="ui instant rotate reveal">
      <div class="visible content">
        <img src=
          class="ui medium image">
      </div>
 
      <div class="hidden content">
        <img src=
          class="ui medium image">
      </div>
    </div>
  </div>
</body>
 
</html>


Output:

Semantic-UI Reveal Variations

Semantic-UI Reveal Variations

Reference: https://semantic-ui.com/elements/reveal.html#instant


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!