<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0" />
<
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"
>
<
div
class
=
"Base_element"
>
You Are On
</
div
>
<
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
>