.bg-box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 300ms ease;
}

.bg-img {
  width: 30px;
  height: 30px;
  background-image: url("/assets/img/graduation-hat.svg");
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-position: center;
  transition: all 300ms ease;
}

.bg-box:hover {
  width: 350px;
  height: 350px;
}

.bg-box:hover .bg-img {
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}