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: