Open In App

Primer CSS Hover Animation

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.

Animations are an important tool to attract users to a specific part of the web page. It helps to point out something important to the consumers. There are different types of animation that we can make use of them as the hover type. Hover animation is used to elevate or scale up a UI element when the user hovers on it.

Primer CSS Hover Animation Class:

  • .anim-hover-grow: Add this class to the respective element to implement this animation. 

Syntax:

<div class=".anim-hover-grow">
     ...
</div>

Example: This example demonstrates the use of the Primer CSS Hover animation using the anim-hover-grow class. You can see the output in the image below. When the user hovers over the image it scales up.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Pulse Animation</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="text-center">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
          
        <h3><u>Primer CSS Hover Animation</u></h3><br />
    </div>
  
    <div class="anim-hover-grow d-flex flex-justify-center">
        <img style="width:150px;border:5px double;" src=
    </div>
</body>
  
</html>


Output: 

Primer CSS Hover Animation

Reference: https://primer.style/css/utilities/animations#hover-animation 


Last Updated : 20 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads