Semantic-UI Scale Transition

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 scale transition.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML. This method is used to control the way in which transition takes place between the two states of the element.

An element can scale into or out of view while the transition takes place by some event.

Syntax:

 $('.image').transition('scale');

Example 1: The following code demonstrates the scale transition of the image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui header green">w3wiki</h1> 
        <strong>Semantic UI Scale Transitions</strong>     
      
        <div class="ui container">                 
            <img class="ui image medium" 
                 src= 
"https://media.w3wiki.net/wp-content/uploads/20220210074530/color2-300x166.jfif" /> 
            <br/> 
            <button class="ui button"> 
                Click here!! 
            </button>         
        </div> 
    </center> 
      
    <script> 
        $('button').click(function () { 
            $('.image').transition('scale'); 
        })         
    </script> 
</body> 
</html> 

Output:

Semantic-UI Scale Transition

Example 2: The following example demonstrates the scale transition on the image hover event by the user as shown in the output.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"> 
    </script>     
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui header green">w3wiki</h1> 
        <strong>Semantic UI Scale Transitions</strong>     
      
        <div class="ui container">                 
            <img class="ui image medium" src= 
"https://media.w3wiki.net/wp-content/uploads/20220210074530/color2-300x166.jfif" /> 
            <br/> 
            <button class="ui button"> 
                Click here!! 
            </button>         
        </div> 
    </center> 
      
    <script> 
        $('img').hover(function () { 
            $('.image').transition('scale'); 
        }) 
    </script> 
</body> 
</html> 

Output:

Semantic-UI Scale Transition

Reference: https://semantic-ui.com/modules/transition.html

HTML

HTML

Contact Us