<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;
    }
  }
}

//----
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://unpkg.com/[email protected]/dest/tilt.jquery.min.js