This is the promised write-up based on the following post.
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.
![](https://uploads-eu-west-1.insided.com/docebosuccess-en/attachment/4c36ce4c-6465-41cc-9438-ef2af8fdfe8f.gif)
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>