Semantic-UI Image Hidden State

Last Updated : 09 Mar, 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 has a bunch of components for user interface design. One of them is “Image”. Images are an important tool to depict information on web pages. Users can interact with them by clicking or hovering on them. Depending on the requirements of the usage of images there are different states of images. One of them is the hidden state.

Semantic UI Image Hidden State is used to hide an image by default. The user might need to hide some images in the UI where users do not have the access to interact. In that case, a hidden state comes in handy. Users can put the image in a hidden state. Different images can be hidden inside the code without showing it into the front end. Users can hide the image on certain conditions according to their requirements.

Semantic UI Image Hidden State Class:

hidden: This class is used to put the image in a hidden state and prevent any interaction with it.

Syntax:

<div class="ui container">
      <img class="ui hidden image" src="" />
      ....
</div>

Example 1: This example demonstrates the image hidden state using the hidden class. Users will not be able to see the image. You can see the output in the image below which shows a hidden state of the image.

HTML

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Semantic-UI Image Hidden State</title> 
      <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" /> 
   </head> 
   <body> 
      <div class="ui container"> 
         <br /><br /> 
         <h2 class="ui header green">GeeksforGeeks</h2> 
         <strong>Semantic UI Image Hidden State</strong> 
         <hr> 
         <br /> 
         <strong> Hidden Image:</strong> 
         <br /><br /> 
         <img class="hidden medium ui image"
              src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png" /> 
      </div> 
   </body> 
</html>

Output :

Semantic-UI Image Hidden State

Example 2: This example demonstrates the image hidden state using the hidden class. You can see the output in the image below which shows a hidden logo.

HTML

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Semantic-UI Image Hidden State</title> 
      <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
            rel="stylesheet" /> 
   </head> 
   <body> 
      <div class="ui container"> 
         <br/><br/> 
         <h2 class="ui header green">GeeksforGeeks</h2> 
         <strong>Semantic UI Image Hidden State</strong> 
         <hr> 
         <br/> 
         <strong>Hidden Logo:</strong> 
         <br /><br /> 
         <img class="hidden small ui image" 
              src= 
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' /> 
      </div> 
   </body> 
</html>