Skip to content
Related Articles

Related Articles

Design a 3D Hover Annotation Card using tilt.js

View Discussion
Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 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
  • CDN link:

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


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                       initial-scale=1.0" />
    <!--CDN Link-->
    <script src=
        .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);
    <div class="parent_box" data-tilt data-tilt-scale="1.1">
        <!-- Initial Element-->
        <div class="Base_element">
            You Are On
        <!--Element To Be Showed On Hovering-->
        <div class="content_box">
            Geeks For Geeks
    <script type="text/javascript">
        VanillaTilt.init(document.querySelectorAll(".parent_box"), {
            // max tilt rotation (degrees)
            max: 25,
            // Speed of the enter/exit transition
            speed: 400,


3D Hover Annotation Card

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!