<!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" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
#cont {
border: 1px solid red;
width: 200px;
height: 550px; /* alto del contenedor principal. suma de los 3 height de (#img_superior, #img_inferior, #centro_vacio) */
}
#img_superior {
width: 200px;
height: 200px;
background: yellow;
}
#img_inferior {
width: 200px;
height: 200px;
background: green;
}
#centro_vacio { /* crea el espacio donde #centro_relativo_img_centro será colocado */
width: 200px;
height: 150px; /* este alto ha de ser igual que el alto de #centro_relativo_img_centro */
background: pink;
}
#centro_relativo_img_centro {
position: relative;
top: -350px; /* suma de los height de (#img_inferior y #centro_relativo_img_centro). ha de ser negativo */
width: 200px;
height: 150px;
background: black;
z-index: 999; /* superposición */
}
#cont_imagenes:hover > div#img_superior {
background: red;
}
#cont_imagenes:hover > div#img_inferior {
background: blue;
}
</style>
</head>
<body>
<div id="cont">
<div id="cont_imagenes">
<div id="img_superior">contenido de superior</div><div id="centro_vacio">contenido crea espacio</div><div id="img_inferior">contenido de inferior</div>
</div>
<div id="centro_relativo_img_centro">contenido de centro</div>
</div>
</body>
</html>