.tooltip {position: relative;}
.tooltip:before, .tooltip:after {display: block; font-family: Cousine, Consolas; font-size: 7px; line-height:9px; letter-spacing:1px; text-transform:uppercase; opacity: 0; position: absolute; transform: translate3d(0, -10px, 0); transition: all .5s ease-in-out;}
.tooltip:before {background: linear-gradient(to right, #4deeea, #ffe700, #f000ff); color: #fff; content: attr(data-title);padding:1px 2px; top: 20px; left: -7px;}
.tooltip:hover:after,.tooltip:hover:before {opacity: 1; transform: translate3d(0, 0, 0);}