Image with Title/Description Hover on MouseOver

Question

Hello All,
So currently I am having trouble getting this perfect. I have an image that populates dynamically, as well as Title, Description and Link to the details page. The problem is the hover is not centered to the image, and in IE it doesn't always appear when you mouse over. If anyone could please help me out I would greatly appreciate it! I haven't been able to get this to work properly, and have been working on/off for a week.
Here is the html/php code:
  <div class="featured2">
    <h2>Featured </h2>
    <?php foreach ($feature as $featured) { ?>
  <div class="featured-pic2">
        <img src="image/<?php echo $featured['filename']; ?>" alt="" width="320" height="320" />
        <div class="title2">
        <a href="details.php?place=<?php echo $featured['link_name']; ?>">
        <span>
     <h2><?php echo $featured['name']; ?></h2>
  <p><?php echo substr($featured['description'], 0, strpos($featured['description'], '.')+1);?></p>
        </a>
        </span>
        </div>
        </div>
<?php } ?>
  </div>
And here is the CSS
.featured-pic2 {
position:relative;
float:left;
width:320px;
height:320px;
padding:5px 5px 5px 5px;
border:#F00 }
.title2 {
left:0px;
top:0px;
position:absolute;
float:left;
width: 325px;
height: 325px;
top:0px;
left:0px;
.title2 a {
color: #FFF;
width: 320px;
height: 320px;
display: block;
text-decoration: none;
.title2 a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);
.title2 a span {
display: none;
padding:0px;
.title2 a:hover span {
display: block;

Answer 1

Ok so I have made some modifications to the CSS as follows; What isn't correct now is that in IE9 the hover is white (no big deal) should be grey, but in Mozilla the hover is not centered (because I removed the padding on a:hover) to center it in IE. Other than that the functionality is great now! And just some minor details to work out.
.featured-pic2 {
    position:relative;
    float:left;
    width:320px;
    height:320px;
    padding:5px 5px 5px 5px;
    border:#F00 }
.title2 {
    left:0px;
    top:0px;
    position:absolute;
    float:left;
    width: 325px;
    height: 325px;
    top:0px;
    left:0px;
.featured-pic2 a {
    color: #666;
    width: 320px;
    height: 320px;
    display: block;
    text-decoration: none;
.featured-pic2 a:hover {
    background:#000;
    opacity:.60;
    ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter:alpha(opacity=60);
    padding: 0px;
.featured-pic2 a span {
    display: none;
    padding:5px;
.featured-pic2 a:hover span {
    display: block;