.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); }