<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
a {outline: 0;}
div#cont {
width: 150px;
padding: 100px 0 0 0; /* alto de la imagen */
border: 1px solid red;
}
div#cont a {
display: block;
}
div#cont div#cont_img img {
display: none;
}
div#cont div#cont_img img#i1 {
display: block;
position: absolute;
left: 0;
top: -300px;
}
div#cont a:hover ~ div#cont_img {
display: block;
left: 0;
top: -300px;
}
div#cont a:hover#l1 ~ div#cont_img img#i1, div#cont a:hover#l2 ~ div#cont_img #i2, div#cont a:hover#l3 ~ div#cont_img img#i3, div#cont a:hover#l4 ~ div#cont_img img#i4 {
display: block;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="cont">
<a id="l1" href="#"><img src ="img1.png" id="l1" width="50px" height="50px" alt="" /></a>
<a id="l2" href="#"><img src ="img2.png" id="l2" width="50px" height="50px" alt="" /></a>
<a id="l3" href="#"><img src ="img3.png" id="l3" width="50px" height="50px" alt="" /></a>
<a id="l4" href="#"><img src ="img4.png" id="l4" width="50px" height="50px" alt="" /></a>
<div id="cont_img">
<img src ="img1.png" id="i1" width="150px" height="100px" alt="" />
<img src ="img2.png" id="i2" width="150px" height="100px" alt="" />
<img src ="img3.png" id="i3" width="150px" height="100px" alt="" />
<img src ="img4.png" id="i4" width="150px" height="100px" alt="" />
</div>
</div>
</body>
</html>