Design a 3D Hover Annotation Card using tilt.js - GeeksforGeeks

01 Feb, 2021
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
npm command:
npm install vanilla-tilt
CDN link: https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js
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
CSS-Questions
HTML-Questions
JavaScript-Questions
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML