Design a 3D Hover Annotation Card using tilt.js

0 0 1 minute read

3D Hover Annotation Card: Upon hovering the card will display another card in 3D effect on top, the card possesses a tilting effect as well. This effect can be created using vanilla-tilt.js library and CSS.

Installation: This can be installed by using a node package manager (npm) or by adding the CDN link in the code.

npm command:
```
npm install vanilla-tilt
```
CDN link:

https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

Example: Below example uses tilt.js to create 3D hover effect card.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width,  
                       initial-scale=1.0" /> 
    <!--CDN Link-->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"> 
    </script> 
  
    <style> 
        .parent_box { 
            top: 30px; 
            left: 30px; 
            position: relative; 
            width: 300px; 
            height: 230px; 
            margin: 10px 0; 
            transform-style: preserve-3d; 
            background-color: green; 
            color: white; 
        } 
          
        .parent_box:hover { 
            box-shadow: 0 50px 80px rgba(0, 0, 0, 0.2); 
        } 
          
        .parent_box .base_element { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
        } 
          
        .parent_box .content_box { 
            background-color: white; 
            position: absolute; 
            top: 30%; 
            left: 40px; 
            right: 40px; 
            font-weight: 700; 
            font-size: 20px; 
            color: green; 
            text-align: center; 
            transform: translateZ(20px) scaleY(0); 
            padding: 40px 25px; 
            transform-origin: top; 
            transform: 0.5s; 
            transform-style: preserve-3d; 
        } 
          
        .parent_box:hover .content_box { 
            transform: translateZ(50px) scaleY(1); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="parent_box" data-tilt data-tilt-scale="1.1"> 
  
        <!-- Initial Element-->
        <div class="Base_element"> 
            You Are On 
        </div> 
  
        <!--Element To Be Showed On Hovering-->
        <div class="content_box"> 
            Geeks For Geeks 
        </div> 
    </div> 
      
    <script type="text/javascript"> 
        VanillaTilt.init(document.querySelectorAll(".parent_box"), { 
  
            // max tilt rotation (degrees) 
            max: 25, 
  
            // Speed of the enter/exit transition 
            speed: 400, 
        }); 
    </script> 
</body> 
  
</html> 

Output:

3D Hover Annotation Card

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!