HTML CSS Show Text box on hovering - html

Question

What I'm looking for is that when I hover over an image or text it will automatically shows a box that contains a text related to that image. As follows:
CSS :
.owners{
width:500px;
height:300px;
border:0px solid #ff9d2a;
margin:auto;
float:left;
}
span.own1{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 250px;
width:310px;
letter-spacing: 1px;
line-height: 20px;
position:absolute;
text-align: center;
text-transform: uppercase;
top: auto;
left:auto;
display:none;
padding:0 0px;
}
p.own{
margin:0px;
float:left;
position:relative;
cursor:pointer;
}
p.own:hover span{
display:block;
}
HTML :
<div class="owners">
<table width="100%" height="100%" align="center" border="1">
<tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
<tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
</table>
</div>
The output for the above codes is a table that contains list of employee images and their names. So when I hover the mouse on top of them, a box shows that contains the text related to it BUT they are shown behind the images and names, by that I mean I am looking to make this box stand in front of the images not behind them. I hope this makes sense! I've tried changing position:absolute and position:fixed but none works as needed!
You can check this also : http://jsfiddle.net/g1o8vyqd/

Answer 1

JSFiddle
Just add the code and you should confirm there is no z-index higher than your hover element.
z-index:9;
to:
p.own:hover span{
display:block;
z-index:9;
}

Answer 2

Use z-index:1 to raise the element above the rest:
p.own:hover span {
display:block;
z-index:1
}
Fiddle: http://jsfiddle.net/g1o8vyqd/3/
Note, also, that your markup is not very good: besides the fact that table is being used incorrectly (it's for tabular data), you are using the font tag, which is obsolete. (In fact, it was deprecated in HTML 4)

Answer 3

Do you mean something like this?
p.own{
margin:0px;
float:left;
position:relative;
cursor:pointer;
opacity: 0;
}
p.own:hover span{
display:block;
opacity: 1;
z-index: 99;
}

Answer 4

Alihamra, It sounds like you are looking for a tooltip. I would recommend cleaning up your code like the previous answers/comments outlined and then trying to utilize something like this: http://www.menucool.com/tooltip/css-tooltip.
Thanks