Как использовать CSS для позиционирования всплывающего div при использовании :hover...?

Я пытаюсь создать всплывающее окно в CSS. В данном случае это маленький div, содержащий текст с надписью на наведенном изображении. Однако я определенно делаю это неправильно. Я либо неправильно позиционирую div :hover в CSS (я пробовал различные позиции (фиксированная, абсолютная, плавающая, прозрачная и т.д.), но он продолжает отображаться внутри основного div. Я могу ошибаться с HTML, поскольку я размещаю его внутри основного div, на который вы наводите курсор, чтобы появилось всплывающее окно. Но я думаю, что он должен быть там, чтобы появляться при наведении на основной div. Любая помощь будет принята с благодарностью. Код ниже:

HTML:

<div class="topIcons topIconsHover topLabelHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>  

CSS:

.topIcons {
    padding:14px 6px 10px 6px;
    float:right;
 }

.topIconsHover:hover {
    background-color:#555555;
    cursor:pointer
}

.topLabelHover:hover {
    background-color:#555555;       
    width:80px;
    height:24px;
    position:fixed;
        top:40px;
}

Я не против использования JavaScript (или JQuery), если это необходимо, но мне кажется, что это достаточно просто для CSS. Также, лучше ли использовать CSS вместо JavaScript (или Jquery), когда это возможно, потому что, возможно, это быстрее? Я могу ошибаться, но мне было бы интересно узнать о лучшей практике.

edit* Все еще испытываю проблемы, поэтому решил объяснить, что я пытаюсь сделать с макетом страницы, и, возможно, это поможет. У меня есть ряд иконок в навигационной панели, все они расположены справа. При наведении курсора я хотел бы, чтобы фон менялся (что я сделал в CSS с помощью класса "topIconsHover") и чтобы под соответствующим наведенным div иконки в навигационной панели при наведении появлялся div "label".