CSS img Hover problems

I want an image gallery, with thumbnails of pdfs that people can then click on to download. However, because I am writing in a Content Editor Web Part on Sharepoint 2007, this is the only way I've found that works. However, there are two things that I'm having trouble with:

* When they hover over the image, the border colour changes as it should but not if they hover over where the caption should be (or where it is when the caption is shown). Is there a way around this?

* In Chrome, the caption shows up below the poster and narrower than the picture (because of the way Chrome interprets padding I'm told). I've tried using a Chrome-specific line but to no avail - any ideas?

CSS is below:

.imageHolder {
position: relative;
width: 200px;
display: inline;
margin: 10px;
}

.imageHolder img {
border: 10px ridge;
border-color: #ffffff;
width: 200px;
}

.imageHolder img:hover {
border-color: #ffff00;
}

.imageHolder .caption {
position: absolute;
top: 10px;
height:auto;
-webkit-width:200px;
width: 190px;
left: 10px;
padding: 5px;
z-index: -1;
box-sizing: border-box;
}

.imageHolder:hover .caption {
background-color: #7F7F7F;
opacity: 0.7;
z-index: 100;
}

.caption h1 {
font-family: Century Gothic, Arial, Sans-Serif;
font-weight: bold;
font-size: 16px;
color: #fff;
margin-bottom: 0px;
}

.caption h2 {
font-family: Century Gothic, Arial, Sans-Serif;
font-weight: normal;
font-size: 12px;
color: #ffffff;
margin-top: 0px;
padding-bottom: 0px;
}

And the html is:

Caption
Subtitle.