Skip to content
Related Articles

Related Articles

Design a 3D Hover Annotation Card using tilt.js
  • Difficulty Level : Expert
  • Last Updated : 01 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

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=
    </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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :