#sample { margin: 50px auto 50px; background: yellow; } .wrap { display: inline-block; list-style: none; float: left; margin: 20px; padding: 0; } .wrap a{ display: block; position: relative; width: 100px; height: 100px; padding: 5px; border-radius: 50%; background: #222; transition: .3s; } .wrap a:hover{ background: #555; } .wrap a:before { font-weight: normal; display: inline-block; width: 100px; height: 100px; padding: 0; margin: 0; color: #fff; font-size: 30px; text-align: center; line-height: 1; } #sample1 a span{ position: absolute; opacity: 0; top: -50px; left: -5px; width: 100px; height: 30px; padding: 10px; border-radius: 2px; background: #555; color: #fff; font-size: 17px; line-height: 1; transition: .3s; text-align: center; vertical-align: middle; } #sample1 a span:after{ position: absolute; top: 100%; left: 54px; height: 0; width: 0; border: 6px solid transparent; border-top: 6px solid #555; content: ""; } #sample1 a:hover span{ opacity: 1; top: -60px; } #sample2 a span { position: absolute; opacity: 0; top: 0px; left: -5px; width:100px; height: 30px; padding: 10px; border-radius: 2px; background: #555; color: #fff; font-size: 17px; line-height: 1; transition: .2s; text-align: center; } #sample2 a span:after{ position: absolute; top: 100%; left: 54px; height: 0; width: 0; border: 6px solid transparent; border-top: 6px solid #555; content: ""; } #sample2 a:hover span{ opacity: 1; top: -60px; } #sample3 a span{ position: absolute; opacity: 0; top: 0px; left: -5px; width: 100px; height: 30px; padding: 10px; border-radius: 2px; background: #555; color: #fff; font-size: 17px; line-height: 1; transition: .3s; -webkit-transform: rotate(45deg); transform: rotate(45deg); text-align: center; } #sample3 a span:after{ position: absolute; top: 100%; left: 54px; height: 0; width: 0; border: 6px solid transparent; border-top: 6px solid #555; content: ""; } #sample3 a:hover span{ opacity: 1; top: -60px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } #sample4 a span{ position: absolute; opacity: 0; top: 0px; left: -5px; width: 100px; height: 30px; padding: 10px; border-radius: 2px; background: #555; color: #fff; font-size: 17px; line-height: 1; transition: .3s; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); text-align: center; } #sample4 a span:after{ position: absolute; top: 100%; left: 54px; height: 0; width: 0; border: 6px solid transparent; border-top: 6px solid #555; content: ""; } #sample4 a:hover span{ opacity: 1; top: -60px; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }