Open In App

Semantic-UI Reveal Disabled State

Last Updated : 28 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
          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=
               class="ui small image">
      </div>
      <div class="hidden content">
          <img src=
               class="ui small image">
      </div>
    </div>
</body>
</html>


Output:

Semantic-UI Reveal Disabled State

Semantic-UI Reveal Disabled State

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
          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=
             class="ui small image">
      </div>
      <div class="hidden content">
        <img src=
             class="ui small image">
      </div>    
    </div>
</body>
</html>


Output:

Semantic-UI Reveal Disabled State

Semantic-UI Reveal Disabled State

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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads