<div class="container">
<!--
maxTilt: 20,
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition.
transition: true, // Set a transition on enter/exit.
disableAxis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
glare: false, // Enables glare effect
maxGlare: 1 // From 0 - 1.
-->
<div class=" column tilt tilt-box tilt-box1 Wrapline animLine " data-tilt data-tilt-transition="true" data-tilt-perspective="1000" data-tilt-glare="true" data-tilt-reset="true" data-tilt-scale="0.9">
<a href="https://www.aldoferrari.com/aldo-work-the-it-consultant-ui-ux/" title="option 1" class="tilt-box-inner Wrapline animLine inverted ">
<span class="text-content">
WORK
</span>
</a>
</div>
<div class=" column tilt tilt-box tilt-box2 Wrapline animLine inverted" data-tilt data-tilt-transition="true" data-tilt-perspective="1000" data-tilt-glare="true" data-tilt-reset="true" data-tilt-scale="0.9">
<a href="https://www.aldoferrari.com/aldo-the-artist/" title="option 2" class="tilt-box-inner Wrapline animLine ">
<span class="text-content">
ART
</span>
</a>
</div>
<div class=" column tilt tilt-box tilt-box3 Wrapline animLine inverted" data-tilt data-tilt-transition="true" data-tilt-perspective="1000" data-tilt-glare="true" data-tilt-reset="true" data-tilt-scale="0.9">
<a href="https://www.aldoferrari.com/aldo-the-car-tuning-tuner/" title="option 3" class="tilt-box-inner Wrapline animLine ">
<span class="text-content">
TUNING
</span>
</a>
</div>
<div class=" column tilt tilt-box tilt-box4 Wrapline animLine " data-tilt data-tilt-transition="true" data-tilt-perspective="1000" data-tilt-glare="true" data-tilt-reset="true" data-tilt-scale="0.9">
<a href="https://www.aldoferrari.com/aldo-the-multitask-person/" title="option 4" class="tilt-box-inner Wrapline animLine inverted">
<span class="text-content">
ALDO
</span>
</a>
</div>
</div>
<!-- -----
<div class="topcontainer innerLine ">
Content
</div> -->
<!-- https://github.com/gijsroge/tilt.js -->@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
$col1: #39f;
$col2: #fb0;
$col3: #5c9;
$col4: #f33;
html,
body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 50%;
height: 50%;
}
@media screen and (max-width: 600px) {
.column {
flex-basis: 100%;
height: 25%;
}
}
@media screen and (min-width: 1800px) {
.column {
flex-basis: 25%;
height: 100%;
}
}
/* general styles */
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
color: #ccc;
background: #000;
/*margin-bottom: 70px;*/
overflow: hidden;
}
.tilt,
.tilt-box {
// padding: 15px;
margin: 0;
padding: 0;
/*border: 1px solid #666;*/
box-sizing: border-box;
}
.tilt-box1 {
background-color: $col1;
.tilt-box-inner {
background: transparentize(rgba($col1, 1), 0.8);
}
}
.tilt-box2 {
background-color: $col2;
.tilt-box-inner {
background: transparentize(rgba($col2, 1), 0.8);
}
}
.tilt-box3 {
background-color: $col3;
.tilt-box-inner {
background: transparentize(rgba($col3, 1), 0.8);
}
}
.tilt-box4 {
background-color: $col4;
.tilt-box-inner {
background: transparentize(rgba($col4, 1), 0.8);
}
}
//------
.topcontainer {
position: fixed;
width: 30vw;
height: 40vh;
top: 30vh;
left: 35vw;
background: black;
contnet: "";
z-index: 550;
display: flex;
align-items: center;
border-radius: 6px;
}
/* ------ */
.tilt {
// box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
transform-style: preserve-3d;
//margin: 50px auto;
margin: 0;
padding: 0;
&:hover {
z-index: 300;
}
&.tilt-box {
box-shadow: 0 20px 70px -10px rgba(black, 0.7),
0 50px 100px 0 rgba(black, 0.2);
}
a.tilt-box-inner {
//display: block;
width: 60%;
height: 60%;
bottom: 0px;
position: absolute;
color: white;
transform: translateZ(80px) translateY(-50%) translateX(-50%);
text-decoration: none;
// box-shadow: 0 20px 70px -10px rgba(black, 0.7), 0 50px 100px 0 rgba(black, 0.2);
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
&:hover {
color: black;
text-decoration: none;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7);
}
}
.tilt-box-inner {
// transform: translateZ(100px) translateY(-50%) translateX(-50%);
// position: absolute;
top: 50%;
left: 50%;
display: block;
// border: 1px solid #ffffff;
// pointer-events: none;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
.text-content {
}
}
}
/* -------------------------- */
/* ANIMATED LINE border style */
/* -------------------------- */
.Wrapline {
&.animLine {
// transition: transform .6s 1s;
&::before,
&::after {
content: "";
width: 2rem;
height: 2rem;
border: 1px solid #ffffff;
position: absolute;
z-index: 2;
opacity: 0.3;
transition: 1.5s;
}
&::before {
top: 2rem;
right: 2rem;
border-bottom-width: 0;
border-left-width: 0;
}
&::after {
bottom: 2rem;
left: 2rem;
border-top-width: 0;
border-right-width: 0;
}
&.inverted {
&::before {
left: 2rem;
top: 2rem;
border-bottom-width: 0;
border-right-width: 0;
border-left-width: 1px;
}
&::after {
bottom: 2rem;
right: 2rem;
left: 0;
top: auto;
left: auto;
border-top-width: 0;
border-left-width: 0;
border-right-width: 1px;
}
}
}
&:hover {
&.animLine::before,
&.animLine::after {
width: calc(100% - 4.1rem);
height: calc(100% - 4.1rem);
pointer-events: none;
}
}
}
//----
External CSS
This Pen doesn't use any external CSS resources.