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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
