Semantic-UI Reveal Disabled State

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. In this article, we are going to learn about Reveal Disabled State.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A reveal displays additional content in place of previous content when activated and it will not animate when hovered in a disabled state.

Semantic-UI Reveal Disabled State Class:

disabled: A disabled reveal will not animate when hovering over the image.

Syntax:

<div class="ui disabled move reveal">
 ...
</div>

The below example illustrates the Semantic-UI Reveal Disabled State:

Example 1:

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>
    <center>
    <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong> Semantic-UI </strong>
    <h3 class="ui dividing header">
      Reveal Disabled State
    </h3>
    </center> 
    <!--disabled class is used-->
    <div class="ui disabled move reveal">
      <div class="visible content">
          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png" 
               class="ui small image">
      </div>
      <div class="hidden content">
          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" 
               class="ui small image">
      </div>
    </div>
</body>
</html>

Output:

Example 2:

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>
    <center>
    <h1 class="ui header green">GeeksforGeeks</h1>
    <strong>Semantic-UI Reveal Disabled State</strong>
    </center>   
    <!--disabled class is used-->
    <div class="ui disabled move reveal"> 
      <div class="visible content">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220220200617/gfg.png" 
             class="ui small image">
      </div>
      <div class="hidden content">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" 
             class="ui small image">
      </div>    
    </div>
</body>
</html>

Output:

Reference: https://semantic-ui.com/elements/reveal.html#disabled

Semantic-UI Progress Disabled State

krishna_97

Improve

Article Tags :

Semantic-UI Reveal Disabled State

Similar Reads

Thank You!

What kind of Experience do you want to share?