Semantic-UI Image Link Type

Last Updated : 11 Mar, 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. This framework allows us to use various of its styles and properties to make a website more user-friendly.

A Semantic UI Image is similar to the images used in HTML documents. An image is a graphic representation of some object. Semantic UI offers 2 types of images. These are Image and Image Link.

The image link is used to add links to the images so that when the image is clicked then it will redirect the page to the specified path.

Semantic-UI Image Link Type Class: There is no class for that we need to put the image inside the anchor tag.

Note: For this image, we need to include the image class inside of the anchor tag. We can also define the size as well.

Syntax:

<a href="..." class="ui image">
    <img src="...">
</a>

Example 1: The following code demonstrates the image link type. When we run the given code and click on the image then we will be redirected to the GeeksforGeeks website.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Image Content</title> 
    <link rel="stylesheet"
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <style> 
      body 
      { 
        margin-left:10px; 
        margin-right:10px; 
      } 
    </style>     
</head> 
  
<body> 
      <h1 class="ui header green"> 
        GeeksforGeeks 
    </h1> 
    <strong>  Semantic UI Image Link Type  </strong> 
    <br /><br/> 
    <a href="https://www.geeksforgeeks.org/" 
       class="ui medium image"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
    </a> 
</body>   
</html> 

Output:

Semantic-UI Image Link Type

Example 2: The following code demonstrates the image link type of various images in the form of a list.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Semantic-UI Label Image Content</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />     
    <style> 
       body 
      { 
        margin-left:10px; 
        margin-right:10px; 
      } 
    </style> 
</head> 
  
<body> 
      <h1 class="ui header green"> 
        GeeksforGeeks 
    </h1> 
    <strong> Semantic UI Image Link Type </strong> 
    <br/><br/> 
      <ol> 
        <li> 
            <a href="https://www.geeksforgeeks.org/" 
               class="ui medium image"> 
              <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                   height="100" 
                   width="100"/> 
            </a> 
        </li> 
        <li> 
            <a href="https://www.geeksforgeeks.org/"
               class="ui medium image"> 
              <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png" 
                   height="100" 
                   width="100"/> 
            </a> 
        </li> 
      </ol>       
</body>   
</html> 