Four corners

This animation is displaying a text box, which is expending on hover with four corners and a moving title.

In order to achieve it you will find below the various codes to be used. Despite using Bricks, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting it into the code element in order to avoid FOUC as the code element is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

HTML:

<section class="fc-section">
  <div class="fc-block">
    <h3 class="fc-head">MY H3 TITLE</h3>
    <div class="fc-ctn">
      <div class="fc-wrapper">
        <p class="fc-txt">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur.
        </p>
        <span class="fc-mouse"></span>
      </div>
    </div>
  </div>
</section>

CSS:

:root {
  --fc-open: 280px;
  --fc-w-corner: 1rem;
  --fc-closed: calc(var(--fc-open) / 3);
  --fc-corner: calc(var(--fc-closed) / 2 + var(--fc-w-corner) * 2);
  --fc-color: #202020;
  --fc-col-corner: #ffd64f;
  --fc-transition: all 0.3s ease;
}
.fc-section {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--fc-color);
}
.fc-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fc-head {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 4rem;
  font-family: "aquatico";
  transition: var(--fc-transition);
}
.fc-ctn {
  position: relative;
  width: var(--fc-closed);
  height: var(--fc-closed);
  background-color: var(--fc-color);
  z-index: 1;
  transition: var(--fc-transition);
  cursor: pointer;
}
.fc-wrapper {
  width: 100%;
  height: 100%;
  background-color: var(--fc-color);
  z-index: 1;
  transition: var(--fc-transition);
}
.fc-txt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fc-color);
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0);
  color: white;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid var(--fc-col-corner);
  transition: var(--fc-transition);
}
.fc-mouse {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--fc-col-corner);
  transition: var(--fc-transition);
}
.fc-mouse::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border: 1px solid var(--fc-col-corner);
  height: 2px;
}
.fc-ctn::before {
  content: "";
  position: absolute;
  height: var(--fc-corner);
  width: var(--fc-corner);
  top: calc(var(--fc-w-corner) * -1);
  left: calc(var(--fc-w-corner) * -1);
  background-color: var(--fc-col-corner);
  z-index: -1;
}
.fc-ctn::after {
  content: "";
  position: absolute;
  height: var(--fc-corner);
  width: var(--fc-corner);
  top: calc(var(--fc-w-corner) * -1);
  right: calc(var(--fc-w-corner) * -1);
  background-color: var(--fc-col-corner);
  z-index: -1;
}
.fc-wrapper::before {
  content: "";
  position: absolute;
  height: var(--fc-corner);
  width: var(--fc-corner);
  bottom: calc(var(--fc-w-corner) * -1);
  left: calc(var(--fc-w-corner) * -1);
  background-color: var(--fc-col-corner);
  z-index: -1;
}
.fc-wrapper::after {
  content: "";
  position: absolute;
  height: var(--fc-corner);
  width: var(--fc-corner);
  bottom: calc(var(--fc-w-corner) * -1);
  right: calc(var(--fc-w-corner) * -1);
  background-color: var(--fc-col-corner);
  z-index: -1;
}
.fc-block:hover .fc-mouse {
  opacity: 0;
}
.fc-block:hover .fc-head {
  transform: translateY(700%);
}
.fc-block:hover .fc-ctn {
  width: var(--fc-open);
  height: var(--fc-open);
}
.fc-block:hover .fc-txt {
  animation: size 1s ease forwards;
}
@keyframes size {
  0% {
    color: transparent;
    transform: scale(0);
  }
  20% {
    color: transparent;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}