hola haber si así te funciona ..despues retoca tus estilos
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
.contenedor-logo {
width: 600px;
height: 180px;
border-radius:10px;
background-color:white;
color:#00CCFF;
box-shadow:1px 1px 20px 1px #ccc;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-size:60px;
}
.contenedor-logo[class] {
display: table;}
.centrado {
position: absolute;
top: 50%;}
.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;
}
.logo{
width: 305px;
height:70px;
background-color:white;
border: 1px solid #ccc;
border-width:thin;
margin: 0 auto;
position: relative;
top: -50%;
width:305px;
border-radius:10px;
box-shadow:#ccc 1px 1px 20px 1px ;
text-shadow: black 0.1em 0.1em 0.2em;
}
.contenedor-logo:hover{
background-color:#CCCCCC;
}
.apDiv1 {
width:590px;
height:180px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<center>
<div class="apDiv1" onmouseover="document.getElementById('logo').style='background-color=#CCCCCC';"><img src="http://www.forosdelweb.com/f53/elemento-bajo-otro-sin-position-absolute-1017336/images/pass..GIF" width="580" height="170"/></div>
<div class="contenedor-logo">
<div class="centrado">
<div class="logo">Forgoter</div>
</div>
</div>
</center>
</body>
</html>