Animated Border

This is the promised write-up based on the following post. @dklinger @Adam Ballhaussen 

Here is the look based on some additional tweaking. I chose to thicken the border and added my previous barrel text into the div. I also chose to change the color of the barrel text on hover with the border animation.

As expected, there was some tweaking to be done in order to make this work in Docebo. 

For starters, Docebo did not like the use of the ampersands  &:hover::before, &:hover::after  and I have found that sometimes it will choke on the code when declaring multiple selectors so I separated them and typed it all out.

The other main modification I made is the creation of the magicBorder class. I did this so that I could isolate this particular div and not have magic borders all over my platform. Here is how the CSS looked in the end.

/** Test Border Magic **/

div.magicBorder {
    position: relative;
    width: 90%;
    height:90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    border: 2px solid #ff0000;
}

div.magicBorder::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
}

div.magicBorder::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
}

div.magicBorder::before {
    top: -5px;
    left: -5px;
    border-top: 3px solid #ff0000;
    border-left: 3px solid #ff0000;
}

div.magicBorder::after {
    right: -5px;
    bottom: -5px;
    border-bottom: 3px solid #ff0000;
    border-right: 3px solid #ff0000;
}

div.magicBorder:hover::before {
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    transition: .5s;
}

div.magicBorder:hover::after {
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    transition: .5s;
}

div.magicBorder:hover .barrelText h3 {
    color:#ff0000;
    transition: .5s;
}

/** End Test Border Magic **/

All you really have to do for the HTML is throw a div out there with the right class but I chose to put the barrel text animation inside so there is a little extra.

<div class="magicBorder">
<div id="barrel" class="flipSign">
  <div id="barrelBox">
    <h4>Learning is</h4>
    <div class="barrelText">
      <h3>
        fun<br /> 
        important<br />
        invigorating<br />
        uplifting<br />
        life<br />
        fun
      </h3>
    </div>
  </div>
</div>
</div>