kreis

<div class="d1"><div class="d2"></div></div>

.d1 {

  background-color:white;

  width:60px;

  height:60px;

  margin:50px;

  border-radius:100px;

  box-shadow:0px 0px 20px #ddd;

  position:relative;

       -webkit-transition: all .2s ease;

  -moz-transition: all .2s ease;

  -o-transition: all .2s ease;

  -ms-transition: all .2s ease;

  transition: all .2s ease;

}

.d2 {

  background-color:white;

  top:9%;

  left:-75%;

  width:50px;

  height:50px;

  margin:50px;

  border-radius:100px;

  box-shadow:0px 0px 20px grey;

  position:relative;

}

.d1:hover {

  background-color:white;

  width:110px;

  height:110px;

  margin:50px;

  border-radius:100px;

  box-shadow:0px 0px 20px #ddd;

  position:relative;

}