Semantic-UI Image Disabled State

Last Updated : 27 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 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 disabled state.

Semantic UI Image Disabled State is used to show a disabled image by default. The user might need to display some images in the UI where users do not have the access to interact. In that case, a disabled state comes in handy. Users can show the image in a disabled state.

Semantic UI Image Disabled State Class:

disabled: This class is used to display the image in a disabled state and also prevent any interaction with it.

Syntax:

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

Example 1: This example demonstrates the image disabled state using the disabled class. Users will not be able to interact with the image by clicking on it. You can see the output in the image below which shows a disabled image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Image Disabled 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 Disabled State</strong> 
        <hr><br /> 
        <strong> Disabled Image:</strong> 
        <br /><br /> 
        <img class="disabled medium ui image"
             src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png" /> 
    </div> 
</body> 
  
</html> 

Output:

Semantic-UI Image Disabled State

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Image Disabled 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 Disabled State</strong> 
          
        <hr><br/> 
        <strong> Disabled Logo:</strong> 
        <br /><br /> 
        <img class="disabled small ui image" 
             src= 
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' /> 
    </div> 
</body> 
</html> 