HTML — парящий текст не отображается должным образом в PHP?

Я хочу отобразить текст в формате div, который появляется при наведении на текст. Мне это удалось в моем PHP-файле:

echo "<style> " . ".'runes" . $i . ":hover'" . "{" .
"position: absolute;
background-color: rgba(0, 0, 0, 0.9);
width: 225px;
height: 300px;
margin-left: -20px;
margin-top: -267px;
text-align: center;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;}" . "</style>";
echo "<div class='runes" . $i . ":hover'" . "><div class='runestext'>TEXT</div></div>";

И в моем CSS-файле:

.runestext {
font-family: Verdana;
font-style: normal;
font-weight: bold;
font-size: 16px;
color: #fff;
text-decoration: none;
}

Моя проблема в том, что DIV с class=runes отображается правильно, но текст, который я хочу отобразить в этом div, отформатирован с class=runestext отображается в неотформатированном виде в середине страницы. Где ошибка?
Благодарю.

PS: не беспокойся о $iЭто потому, что я зациклил весь код 10 раз для получения 10div.