Semantic-UI | Reveal
Last Updated :
20 May, 2020
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. It uses a class to add CSS to the elements.
Reveal show content in place of previous content when activated or hovered.
Example 1: Fading Reveal.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Reveal Fade</h2>
<div class="ui small fade reveal image">
<img class="visible content" src=
<img class="hidden content" src=
</div>
</div>
</body>
</html>
|
Here in the class of visible content, we have to add the content which we want to show default and in hidden content, we want to put that content which we wanna reveal.
Output:
Example 2: Reveal Move.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Reveal Move</h2>
<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>
|
You can add class up, down and right class to move in up, down, and right direction. For example, for up the class=’ui move up to reveal’.
Output:
Example 3: Rotate Reveal
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2>Reveal Rotate</h2>
<div class="ui small circular rotate reveal image">
<img src=
class="visible content">
<img src=
class="hidden content">
</div>
</div>
</body>
</html>
|
Change class to ‘UI small circular rotate left reveal image’ to rotate it to left.
Output:
You can add instant class to any reveal to reveal without delay.
Note: The aspect ratio of hidden and visible images should be the same.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...