Tachyons Theming Hovers

Last Updated : 08 Jun, 2022

Tachyons is a toolkit used to create a responsive website. In this article, we will learn how to include the hover effect using the Tachyons toolkit.

Hover: This effect is used to tell what that button will do if you click on that image. It is also used to give visual affordance to the user that an element can be interacted with.

Tachyons Theming Hovers Classes:

dim: This class is used to change the opacity on hover.
glow: This class will cause an element to glow whenever the user hovers over it.
hide-child: This class will cause an element to show their child content on hover.
underline-hover: This class will cause an element to underline the text on hover.
grow: This class will cause an element to scale to 1.05% of its normal size on hover.
pointer: This class is used to add a pointer to an element which means on hover the content will fade accordingly.
shadow-hover: This class will cause an element to show shadow on hover.
bg-animate: This class will cause an element to animate on hover.

Syntax:

<element class="class-name">...</element>

Example 1: In this example, we have used the grow class to scale to 1.05% of its normal size on hover.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
  
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body class="contain"> 
    <h2 style="color:green;"> 
        GeeksforGeeks 
    </h2> 
      
    <a class="grow dib f3-ns no-underline  
        bg-light-green black pa5" href="#"> 
        hover on this 
    </a> 
</body> 
  
</html> 

Output:

Example 2: In this example, we have used the dim class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
  
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body class="contain"> 
    <h1 class="dim"> 
        GeeksforGeeks 
    </h1> 
</body> 
  
</html> 