CSS Persistant info popup, with usable HTML in popup - html

Question

I am attempting to create a CSS popup, when hovering over an object. This will be an "info" popup, but I want to interact with HTML inside this popup window.
My idea is to create a DIV, and on hover, have a style that grows the div, showing the relevant HTML to interact with. Upon exit of the resized DIV, normal style to shrink the div back to original size. I don't want to use jQuery or equivalent popups, as I need to have the interaction as quick as possible. I don't want to create a popup, that disappears when leaving the item that popped it, before being able to enter and interact with the HTML in the popup.
My concerns are, having multiple of these objects (divs), I am not sure how they would interact with each other when they are resized, as I will probably need to absolute position the divs in an irregular layout.
Are there better ways to go about this?
A good example of what I am attempting to do, is the Netflix web interface, when hovering over a title, and interacting with the popup.

Answer 1

Ok, my Div layout idea, as above, seems to be doing the trick.
I am changing the z index on hover and normal style's ( of 0 for normal, and z of 1 for hover), for each div, and absolutely positioning the div's.
This way, each "hover" hovers on top of all the other collapsed div's. Its doing the trick for me, for now.
I am leaving this as unanswered, if someone can suggest a better way of achieving this, that might be more efficient than my current solution, please add your solution.
<div id="Container" style="position: relative" >
<%--1st div - Blue--%>
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #0099FF; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
<%--2nd div - Red--%>
<div class="unit2">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 20px" valign="top">
<div style="width: 20px; height: 20px; background-color: #FF3300">
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #FF3300; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
<%--3rd div - Green--%>
<div class="unit3">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 20px" valign="top">
<div style="width: 20px; height: 20px; background-color: #009933">
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #009933; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
</div>
CSS >>
.unit1
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.unit1:hover
{
width: 140px;
height: auto;
z-index: 1;
}
.unit2
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 5px;
left: 35px;
z-index: 0;
}
.unit2:hover
{
width: 140px;
height: auto;
z-index: 1;
}
.unit3
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 35px;
left: 20px;
z-index: 0;
}
.unit3:hover
{
width: 140px;
height: auto;
z-index: 1;
}