Bottom: 0 - weird behavior when zooming - css

Question

I am experiencing some weird behavior when zooming out on my webpage. I have some divs holding a title and <p>overlay. When the user hovers over the div, I want the <p>(in the overlay) to show, and when the user is not hovering, I want the <p> not to show.
This works fine in when the user is at a 0 zoom in the browser, but when the user zooms out, I can see the <p> section. Whilst zoomed out I can increase the bottom to correct for this, but there has to be something I missing.
Is there anyway to keep the <p> hidden when zoomed out?
I understand this must sound crazy so I did a crude JSFiddle to show what I am talking about. The weird thing is that when zooming out on JSFiddle the problem I am having in my browser (safari) is not happening on their site.
http://jsfiddle.net/FB2TM/
Any help would be appreciated!
I should have mentioned that I plan on animating the mouse over effect.

Answer 1

This behavior is happening because the browser is not resizing the text proportionally ending up with text larger than it should. You will also experience different text sizes over different browsers when resizing.
I find that the best solution is to do it differently by completely hiding the text that is not supposed to show:
.box {
width:200px;
height:200px;
background-color:aqua;
position: relative;
overflow: hidden;
}
.caption {
width:200px;
color:white;
background-color:black;
left: 0;
z-index: 2;
bottom: 0;
position: absolute;
}
.caption p {
display: none;
}
.box:hover .caption {
bottom:0;
}
.box:hover .caption p {
display: block;
}
http://jsfiddle.net/FB2TM/2/

Answer 2

Changing from your approach of hiding the text with a negative offset to just hiding the text you want to hide might change your css animation options a bit. It does allow for dropping the z-index from the css.
<div class="box">
<div class="caption">
<div class="title">THE TITLE</div>
<p>These are words, I do not want them to show, until mouseover. When zooming out, I can see these words.</p>
</div>
</div>
and your css to:
.box {
background-color:aqua;
height:200px;
position: relative;
width:200px;
}
.caption {
background-color:black;
bottom:0;
color:white;
position: absolute;
width:200px;
}
.caption p {
display: none;
}
.box:hover p {
display: block;
}
jsFiddle

Answer 3

I suggest to use top and fix positions with margin-top. For example:
.caption {
width:200px;
color:white;
background-color:black;
left: 0;
z-index: 2;
top:100%;
margin-top:-30px; //Height of THE TITLE
position: absolute;
}
.box:hover .caption {
margin-top:-116px; //Height of .caption
}
I think using bottom is not a good practice.
Here's an update to your fiddle: http://jsfiddle.net/FB2TM/3/