Semantic-UI Reveal Visible Content

Last Updated : 25 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Reveal is a feature in Semantic-UI in which additional content can be displayed instead of the previous content when the element is activated. Semantic UI offers different types of reveal like fade, move and rotate and with different types of display of contents which include Visible content, Hidden Content, and also in different variations and states.

In this article, we are going to learn about Semantic-UI Reveal Visible Content and also learn how to implement it with the help of code examples.

Semantic-UI Reveal Visible Content classes:

visible content: This class is used to add content that will be visible even before the element is activated and when an element is activated, it displays previous content.
hidden content: This class is used to add content that will be hidden before the element is activated and when an element is activated, it displays additional content.

Syntax:

<div class="ui small fade reveal image">
  <img class="visible content" src="...">
  <img class="hidden content" src="...">
</div>

Example 1: Below example demonstrated the use of Reveal Visible Content using image and text.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Reveal Visible Content</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <br><br><br> 
        <h1 class="ui header green"> 
            Geeksforgeeks 
        </h1> 
  
        <h3> 
            Semantic-UI Reveal Visible Content 
        </h3> 
  
        <div class="ui small reveal fade image"> 
            <img class="visible content"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220306124807/gfglogo.png"> 
            <h2 class="hidden content"> 
                GeeksforGeeks 
            </h2> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Semantic-UI Reveal Visible Content

Example 2: Below example demonstrated the use of Reveal Visible Content using two images.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Reveal Visible Content</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <br><br><br> 
        <h1 class="ui header green"> 
            Geeksforgeeks 
        </h1> 
  
        <h3> 
            Semantic-UI Reveal Visible Content 
        </h3> 
  
        <div class="ui small fade reveal image"> 
            <img class="hidden content"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220306124807/gfglogo.png"> 
  
            <img class="visible content"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220306132642/gfglogo-300x240.jpg"> 
        </div> 
    </center> 
</body> 
  
</html>