How to use CSS to position div popup when using :hover...?

Question

I am trying to create a popup in CSS. In this case, it's a small div containing text labeling the image you're hovering. However, I am definitely doing it wrong. I am either positioning the :hover div in CSS incorrectly (I've tried different positions (fixed, absolute, float, clear, etc.), but it keeps showing up inside the main div. I could wrong with my HTML, as I'm placing it within the main div that you hover for the popup to appear. But I'd think it has to be there to show up when you hover the main div. Any help is appreciated. Code below:

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;
}

I am fine with using JavaScript (or JQuery) if it's necessary, but it seems like something simple enough for CSS. Also, is it better to use CSS over JavaScript (or Jquery) when possible because perhaps it's faster? I could be mistaken there, but would be interested to of the best practice.

edit* Still having trouble so thought I'd explain further what I'm trying to do with my page layout and perhaps it'll help. I have a series of icons in a navigation bar, all floated right. Upon hovering, I'd like the background to change (which I've managed in CSS with the "topIconsHover" class) and for a "label" div to appear beneath the related hovered icon div in the navigation bar when hovered.

Answer 1

Think you want something like this:

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

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

.topLabelHover {
    display:none;
}

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

http://jsfiddle.net/kHPZK/

Answer 2

Look here:

DEMO

Code used:

HTML:

<div class="imagebox">
  <a href="image.html"><img src="http://dummyimage.com/300x120/444/cf5" /></a> 
  <div class="label">transparent Image label</div>  
</div> 

CSS:

  .imagebox{
    position:relative;
    margin:0 auto;
    width:300px;
    background:#eee;
  }
  .label{
    position:absolute;
    display:none;
    top:0px;
    padding:18px;
    background:#fff;
  }

jQuery:

$('.imagebox').bind('mouseenter mouseleave', function(e){
  var label = $(this).children('.label');
  m = (e.type === 'mouseenter') ?
  label.stop(1).fadeTo(300,0.9) :
  label.stop(1).fadeTo(300,0) ;
});