Unfortunately, your problem is quite difficult to troubleshoot.
Your hover image appears only when you hover over a link and the gallery's caption area appears only when you hover over the gallery.
In addition to this, the hover plugin you use seems to be using JavaScript to control the hover behavior (rather than just CSS) so enabling :hover in a browser's developer tools does not help.
A Juicebox gallery comprises many different elements, each of which is assigned an appropriate z-index value (so that the correct elements are always visible when they should be) so reducing the z-index value for the caption area alone might not work. (It might need to be lowered below a certain threshold value (in order to be stacked below your hover image) to a point where the caption area is no longer visible at all.)
I still think the best solution would be to increase the z-index value of your hover image. It has fewer components than a Juicebox gallery so, in theory, should be the easier of the two to change.
Unfortunately, I am not familiar with your hover plugin and the best source of help for finding out which of its CSS classes you would need to target with a high z-index value would be its author.
This is a long shot but at the end of your 'hover.js' file, try changing:
function hover_images(in_options)
{
var elements = domLib_getElementsByTagNames(['img'], true);
for (var i = 0; i < elements.length; i++)
{
var title = hover_image_map[elements[i].src];
if (undefined != title)
{
elements[i].title = title;
}
}
}
... to:
function hover_images(in_options)
{
var elements = domLib_getElementsByTagNames(['img'], true);
for (var i = 0; i < elements.length; i++)
{
elements[i].style.zIndex = '10000';
var title = hover_image_map[elements[i].src];
if (undefined != title)
{
elements[i].title = title;
}
}
}
I do not know if this will work but it might be worth trying.