Semantic-UI Reveal Move Type
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.
Semantic UI provides us with a very easy way to reveal content in a very easy way instead of using CSS. Semantic UI Reveal is a feature in which additional content is displayed instead of the previous content when the element is activated. Semantic UI offers different types of reveal like fade, move and rotate.
In this article, we are going to learn about Semantic UI Reveal Move Type and its implementation using example code.
Semantic UI Reveal Move Type: Semantic UI Reveal Move Type is a revealing method in which an element moves in a specific direction to display additional information in place of the previous content. The element can move to the right, left, up, or down to reveal content.
Semantic UI Reveal Move type classes:
- left: This class is used to set the left movement to reveal the element.
- right: This class is used to set the right movement to reveal the element.
- up: This class is used to set the movement upwards to reveal the element.
- down: This class is used to set down movement to reveal the element.
Syntax:
<div class="ui move right reveal">
<div class="visible content">
....
</div>
<div class="hidden content">
....
</div>
</div>
Note: The developers can use the different reveal types for the movement using the above classes.
Example 1: We can observe the element move to the left to display the additional content.
HTML
<!DOCTYPE html>
<head>
<title>Semantic-UI Reveal Move Type</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div>
<h2 class="ui header green">
Geeksforgeeks
</h2>
<strong>Semantic UI Reveal Move Type</strong>
<br><br>
<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>
</div>
</body>
</html>
|
Output:
Example 2: We can observe the element moves to the right to display the additional content.
HTML
<html>
<head>
<title>Semantic-UI Reveal Move Type</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">
Geeksforgeeks
</h2>
<strong>Semantic UI Reveal Move Type</strong>
<br><br>
<div class="ui move right reveal">
<div class="visible content">
<img src=
class="ui small image">
</div>
<div class="hidden content">
<img src=
class="ui small image">
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Reveal Move Type
Example 3: We can observe the element moves to the top to display the additional content.
HTML
<html>
<head>
<title>Semantic-UI Reveal Move Type</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Semantic UI Reveal Move Type</strong>
<br><br>
<div class="ui move up reveal">
<div class="visible content">
<img src=
class="ui small image">
</div>
<div class="hidden content">
<img src=
class="ui small image">
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Reveal Move Type
Example 4: We can observe the element move downwards to display the additional content.
HTML
<html>
<head>
<title>Semantic-UI Reveal Move Type</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">Geeksforgeeks</h2>
<strong>Semantic UI Reveal Move Type</strong>
<br><br>
<div class="ui move down reveal">
<div class="visible content">
<img src=
class="ui small image">
</div>
<div class="hidden content">
<img src=
class="ui small image">
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Reveal Move Type
Reference: https://semantic-ui.com/elements/reveal.html#move
Share your thoughts in the comments
Please Login to comment...