Semantic-UI Image States
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.
<img class="hidden ui image" src=".....">
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
<img class="disabled ui image" src=".....">
Output: We can observe that image is in a disabled state