Skip to content
Related Articles

Related Articles

Semantic-UI Reveal Types

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. Semantic-UI Reveal is used to show the additional content in place of previous content when the element is activated. There are different types of Reveal like Fade, Move, and Rotate. In this article, we will discuss Reveal Types in Semantic-UI.

Semantic-UI Reveal Types:

  • fade: This class is used to disappear the element to reveal the content.
  • move: This class is used to move the element to reveal the content.
  • rotate: This class is used to rotate the element to reveal the content.

Syntax:

<div class="ui Reveal-Types-Class reveal">
   ....
</div>

Example 1: The following code demonstrates the Semantic-UI Reveal Fade Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Semantic-UI Reveal Types</title>
  <link href=
      rel="stylesheet"/>
</head>
 
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2
    <h3> Semantic-UI Reveal Types </h3>
  </div> <br>
 
  <strong>Fade: </strong>
  <div class="ui fade reveal">
    <div class="visible content">
      <img src=
          class="ui small image">
    </div>
     
    <div class="hidden content">
      <img src=
          class="ui small image">
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI Reveal Types

Semantic-UI Reveal Types

Example 2: The following code demonstrates the Semantic-UI Reveal Move Type.

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 Types </h3>
  </div> <br>
 
  <strong>Move: </strong>
  <div class="ui move reveal">
    <div class="visible content">
      <img src=
           class="ui small image">
    </div>
     
    <div class="hidden content">
      <img src=
           class="ui small image">
    </div>
  </div>
</body>
</html>


Output:

Semantic-UI Reveal Types

Example 3: The following code demonstrates the Semantic-UI Reveal Rotate Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Semantic-UI Reveal Types</title>
  <link href=
        rel="stylesheet"/>
</head>
 
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2
    <h3> Semantic-UI Reveal Types </h3>
  </div> <br>
 
  <strong>Rotate: </strong>
  <div class="ui small circular rotate reveal image">
    <img src=
        class="visible content">
    <img src=
        class="hidden content">
  </div>
</body>
</html>


Output:

Semantic-UI Reveal Types

https://semantic-ui.com/elements/reveal.html

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!