Magic

magic.css

.magic {
  background: linear-gradient(0deg, #888 0%, #444 100%);
  border-radius: 100%;
  height: 300px;
  left: 0;
  margin: 25px;
  position: absolute;
  top: 0;
  transition: width 0.25s, height 0.25s, top 0.25s, left 0.25s;
  width: 300px;
}

.magic::before {
  display: block;
  background: linear-gradient(0deg, #aaa 0%, #eee 100%);
  border: 1px #ccc solid;
  border-radius: 100%;
  content: '';
  height: 90%;
  left: calc(5% - 1px);
  position: absolute;
  top: calc(5% - 1px);
  transition: border-color 0.25s;
  width: 90%;
}

.magic::after {
  align-items: center;
  background: linear-gradient(0deg, #888 0%, #444 100%);
  border-radius: 100%;
  border: 1px #ccc solid;
  content: '?';
  color: #ccc;
  display: flex;
  font-family: monospace;
  font-size: 150px;
  left: calc(10% - 1px);
  line-height: 150px;
  height: 80%;
  justify-content: center;
  position: absolute;
  top: calc(10% - 1px);
  transition: border-color 0.25s, color 0.25s;
  width: 80%;
}

.magic:hover {
  left: -10px;
  height: 320px;
  top: -10px;
  width: 320px;
}

.magic:hover::before {
  border-color: #0f0;
}

.magic:hover::after {
  border-color: #0f0;
  color: #0f0;
}