Semantic-UI Image States
Last Updated :
22 Apr, 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 various different elements to use to make your website look more amazing. Semantic-UI provides us with a very easy way to style images instead of using long CSS codes. It offers images in different states like hidden and disabled. It also provides us with different types like normal image and image links and also in different variations.
In this article, we are going to learn about the Semantic-UI Image States and its implementation using example code.
Semantic-UI Image States: There are two states in Semantic-UI images which include hidden state and disabled state. Let us now understand each of them.
1. Hidden State: Though the image is included in the code we will not be able to see the image on the webpage because the image is hidden when we use the class .hidden to the image.
Syntax:
<img class="hidden ui image" src=".....">
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Image Hidden State</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="ui container kk">
<h2 class="ui header green kk">Geeksforgeeks</h2>
<strong>Semantic-UI Image Hidden State</strong>
<br /><br />
<img class="hidden medium ui image"
src=
<br>
<p>We will not be able to see image</p>
</div>
</center>
</body>
</html>
|
Output: We can observe that the image is not visible in the output.
2. Disabled State: In Semantic UI disabled state, the image will be visible but we can observe that the image cannot be selected and it will be disabled though it is visible
Syntax:
<img class="disabled ui image" src=".....">
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Image Disabled State</title>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="ui container kk">
<h2 class="ui header green kk">Geeksforgeeks</h2>
<strong>Semantic-UI Image Disabled State</strong>
<br><br>
<img class="disabled medium ui image"
src=
<br>
<p>
We will be able to see image
but in disabled state
<p>
</div>
</center>
</body>
</html>
|
Output: We can observe that image is in a disabled state
Reference:https://semantic-ui.com/elements/image.html#states
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...