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.
<!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
Example 2: The following code demonstrates the Semantic-UI Reveal Move Type.
<!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:
Example 3: The following code demonstrates the Semantic-UI Reveal Rotate Type.
<!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:
https://semantic-ui.com/elements/reveal.html
Reference: https://semantic-ui.com/elements/reveal.html