/* The slow way */
.make-it-slow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* The fast way */
.make-it-fast {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Pre-render the bigger shadow, but hide it */
.make-it-fast::after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover::after {
  opacity: 1;
}
/* All HTML you need is <div class="box"></div> */


/* Scale up the box */
.box:hover {
  transform: scale(1.2, 1.2);
}

/* Fade in the pseudo-element with the bigger shadow */
.box:hover::after {
  opacity: 1;
}
.box {
  justify-content: center;
  overflow: visible;

  display: inline-block;
  width: 160px;
  height: 160px;
  background-color: #ffffff;
  color:rgb(0, 0, 0);

  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.453);
  border-radius:50%;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

  white-space: nowrap;

  text-overflow: ellipsis;
  margin:20px;padding:3px;
}
.box a { opacity: 0.5;color:rgb(0, 0, 0); text-shadow: 0 5px 15px rgb(255, 255, 255);}
.box a:hover {
  color:rgb(255, 255, 255); text-shadow: 0 5px 15px rgb(0, 0, 0);
  opacity: 1;
}
.box::after {
  content: "";
  border-radius: 5px;

  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.box:hover::after {
    opacity: 1;
}

.boxu {
  overflow: hidden;
text-align: center;
  display: inline-block;
  width: 192px;
  height: 192px;
  background-color: rgba(255, 255, 255, 0.429);
  color:rgb(0, 0, 0);
  border-radius: 25px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin:15px;

  padding:15px;
}
.boxu::after {
  content: "";
  border-radius: 25px;

  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.boxu a {color:rgb(0, 0, 0);
font-size:19px;}

.boxu:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.boxu:hover::after {
    opacity: 1;
}
/* Scale up the boxu */
.boxu:hover {
  transform: scale(1.2, 1.2);
}

/* Fade in the pseudo-element with the bigger shadow */
.boxu:hover::after {
  opacity: 1;
}