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