Hover эффект блока

Question

Как можно реализовать данный hover эффект ?

Answer 1

Добавил border-rdius + rotate для более эффектного появления:

.main {
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
  overflow: hidden
}

.main h1 {
  position: absolute;
  transition: all .6s;
}

.main:hover h1 {
  color: yellow;
}

.main:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  top: 70%;
  left: -50px;
  background: green;
  border-radius: 11% 89% 80% 20% / 60% 14% 86% 40%;
  transition: all .6s;
}

.main:hover:before {
  border-radius: 50%;
  transform: scale(7) rotate(145deg)
}

<div class="main">
  <h1>Просто текст</h1>
</div>

БЛОГ НА HUSL

Hover эффект блока

Ответы (1 шт):