Open In App

Semantic-UI Reveal Types

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads