apocalipsis_now,
добавить пару картинок и изучить css,
на данный момент плавно умеет только Google Chrome с
background-image работать.
Пример: for Chrome
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main { height: 200px;
width: 200px;
background-image: url(http://www.vseprokosmos.ru/ris/jevodan.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
.div_1 { transition: all 2s ease-in-out;
background-image: url(http://i78.photobucket.com/albums/j81/MariaContria_2006/floorrtr444kf6.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
.div_2 { transition: all 2s ease-in-out;
background-image: url(http://club.foto.ru/gallery/images/photo/2004/06/09/218029.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
#div_1, #div_2{
height: 100px;
border: #CC0000 2px solid
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
$("#div_1").mouseover(function()
{
$("#foto").addClass("div_1").removeClass("div_2")
}
);
$("#div_2").mouseover(function()
{
$("#foto").addClass("div_2").removeClass("div_1")
}
);
}
);
</script>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="main" id="foto">
<tr>
<td>
<div id="div_1" class="pages">БИЗНЕС</div>
<div id="div_2" class="pages">ДЕТИ</div>
</td>
</tr>
</table>
</body>
</html>