Анимация всплывающих подсказок с помощью CSS3

Создадим анимацию всплывающих подсказок (tooltip) вот такого вида

Шаг 1

Покажем наши картинки, для которых нужны всплывающие подсказки.

Код html

<div class="tt-wrapper"> 
 <a href=""><img src="img/class-mage.png"><span>Маг</span></a>
 <a href=""><img src="img/class-priest.png"><span>Монах</span></a> 
 <a href=""><img src="img/class-warrior.png"><span>Воин</span></a> 
 <a href=""><img src="img/class-scout.png"><span >Разведчик</span></a>
</div>

Шаг 2

Создаем стили
Для начала создадим стиль для общего div
код css

.tt-wrapper{
	padding: 0;
	width: 800px;
	margin-top:150px;
    margin-left:25%;
	text-align:center;
}

Затем создадим стили для подсказок

.tt-wrapper a span{
    width: 100px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	margin-left:-123px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: Bolder;
    font-size: 14px;
    color: #004A7F;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	text-decoration:none;
    text-align: center;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 15px;
    position: absolute;
    pointer-events: none;
	bottom: 570px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}
.tt-wrapper  a span:before,
.tt-wrapper  a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
a {
text-decoration:none;
}
.tt-wrapper  a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

В заключении стиль в котором указываем где появиться нашему блоку с подсказкой

.tt-wrapper a:hover span{
    opacity: 0.9;
    bottom: 600px;
	text-decoration:none;
}

Работающий пример подсказок — DEMO