Semantic-UI Reveal Variations
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. In this article, we will discuss Reveal Variations in Semantic-UI.
Semantic-UI Reveal is used to show the additional information in place of previous information when the element is activated.
Semantic-UI Reveal Variations Class:
- instant: This class is used to display the hidden content without any delay.
Syntax:
<div class="ui instant
move/rotate reveal">
......
</div>
Example 1: The following code demonstrates the Semantic-UI Reveal Variations by moving an image.
HTML
<!DOCTYPE html><html><head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/></head><body> <div class="ui container center aligned"> <h2 class="ui green header"> w3wiki </h2> <h3> Semantic-UI Reveal Variations </h3> </div><br> <div class="ui centered card"> <div class="ui instant move reveal"> <div class="visible content"> <img src="https://media.w3wiki.net/wp-content/uploads/20210318103632/gfg.png" class="ui medium image"> </div> <div class="hidden content"> <img src="https://media.w3wiki.net/wp-content/cdn-uploads/20200617163105/gfg-logo.png" class="ui medium image"> </div> </div> </div></body></html> |
Output:
Semantic-UI Reveal Variations
Example 2: The following code demonstrates the Semantic-UI Reveal Variations by rotating an image.
HTML
<!DOCTYPE html><html><head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/></head><body> <div class="ui container center aligned"> <h2 class="ui green header"> w3wiki </h2> <h3> Semantic-UI Reveal Variations </h3> </div><br> <div class="ui centered card"> <div class="ui instant rotate reveal"> <div class="visible content"> <img src="https://media.w3wiki.net/wp-content/cdn-uploads/20201127103715/gfg4.png" class="ui medium image"> </div> <div class="hidden content"> <img src="https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" class="ui medium image"> </div> </div> </div></body></html> |
Output:
Semantic-UI Reveal Variations
Reference: https://semantic-ui.com/elements/reveal.html#instant