.box {
        position: relative;
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 1px solid rgba(235, 235, 235, .3);
        overflow: hidden;
      }
      .box:after {
        content: '';
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgb(255, 255, 255);
        transition: .3s all linear;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        transform: scale(0);
        margin: auto;
        background: url(http://www.jq22.com/demo/jQueryHover201706082104/img/2.png) no-repeat center 0px / cover;
      }
      .fb {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        opacity: .4;
        transition: .3s all ease-in;
      }
      .fb:nth-child(1) {
        background: rgba(255, 0, 0, 1);
        transform: translateX(0)translateY(-100px);
      }
      .fb:nth-child(2) {
        background: rgba(255, 165, 0, 1);
        transform: translateX(70.7px)translateY(-70.7px);
      }
      .fb:nth-child(3) {
        background: rgba(255, 255, 0, 1);
        transform: translateX(100px)translateY(0);
      }
      .fb:nth-child(4) {
        background: rgba(0, 255, 0, 1);
        transform: translateX(70.7px)translateY(70.7px);
      }
      .fb:nth-child(5) {
        background: rgba(0, 127, 255, 1);
        transform: translateX(0)translateY(100px);
      }
      .fb:nth-child(6) {
        background: rgba(0, 0, 255, 1);
        transform: translateX(-70.7px)translateY(70.7px);
      }
      .fb:nth-child(7) {
        background: rgba(139, 0, 255, 1);
        transform: translateX(-100px)translateY(0);
      }
      .fb:nth-child(8) {
        background: rgba(255, 0, 0, 1);
        transform: translateX(-70.7px)translateY(-70.7px);
      }
      .box:hover::after {
        transform: scale(1);
        opacity: .7;
      }
      .box:hover .fb:nth-child(1) {
        background: rgba(255, 0, 0, 1);
        transform: translateX(0)translateY(-20px);
      }
      .box:hover .fb:nth-child(2) {
        background: rgba(255, 165, 0, 1);
        transform: translateX(-14.14px)translateY(14.14px);
      }
      .box:hover .fb:nth-child(3) {
        background: rgba(255, 255, 0, 1);
        transform: translateX(20px)translateY(0);
      }
      .box:hover .fb:nth-child(4) {
        background: rgba(0, 255, 0, 1);
        transform: translateX(14.14px)translateY(14.14px);
      }
      .box:hover .fb:nth-child(5) {
        background: rgba(0, 127, 255, 1);
        transform: translateX(0)translateY(20px);
      }
      .box:hover .fb:nth-child(6) {
        background: rgba(0, 0, 255, 1);
        transform: translateX(-14.14px)translateY(14.14px);
      }
      .box:hover .fb:nth-child(7) {
        background: rgba(139, 0, 255, 1);
        transform: translateX(-20px)translateY(0);
      }
      .box:hover .fb:nth-child(8) {
        background: rgba(255, 0, 0, 1);
        transform: translateX(-14.14px)translateY(-14.14px);
      }