Semantic-UI Reveal Fade 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 Reveal is used for revealing content easily instead of using CSS. In Semantic-UI Reveal 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 and even with different variations and with different contents and states. In this article, we are going to learn about Semantic-UI Reveal Fade Type along with its implementation using example code.
The Semantic-UI Reveal Fade Type is a reveal type in which the previous content disappears to display the additional content present below it. The previous content fades to display the content present below it.
Semantic-UI Reveal Fade Type Class:
- fade: These classes are used to reveal additional content by fading previous content.
Syntax:
<div class="ui fade reveal image">
<img class="visible content" src=".....">
...
</div>
Example 1:
HTML
<html>
<head>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">
Geeksforgeeks
</h2>
<strong>Semantic-UI Reveal Fade Type</strong>
<br><br>
<div class="ui small fade reveal image">
<img class="visible content"
src=
<img class="hidden content"
src=
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Reveal Fade Type
Example 2:
HTML
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">
Geeksforgeeks
</h2>
<strong>Semantic-UI Reveal Fade Type</strong>
<br><br>
<div class="ui fade reveal">
<div class="visible content">
<img class="ui small image"
src=
</div>
<div class="hidden content">
<img class="ui small image"
src=
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Reveal Fade Type
Reference: https://semantic-ui.com/elements/reveal.html#fade
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...