<!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>
<style type="text/css">
<!--
body {
padding: 0;
margin: 0;
background-color: #996633;
font-family: Comic Sans MS;
font-size: 16px;
}
#galLinks {
padding: 0;
margin: 10px auto 0 auto;
width: 900px;
border: #FFFFCC solid 3px;
}
#galLinks a {
padding: 0;
margin: 0;
text-decoration: none;
display: inline-block;
}
#galLinks a p {
padding: 0;
margin: 2px;
width: 444px;
color: #FFFFCC;
font-family: "Comic Sans MS";
font-size: 100px;
font-weight: bold;
text-align: center;
text-decoration: underline;
border: #FFFFCC solid 1px;
position: relative;
}
#galLinks a:hover p {
text-decoration: none;
background-color: #CC9966;
}
#galLinks a p img {
padding: 0;
margin: 0;
width: 400px;
height: 300px;
font-size: 12px;
border: #FFFFCC solid 1px;
visibility: hidden;
position: absolute;
top: 100px;
left: 425px;
}
#galLinks a p img.rightLink {
left: -382px;
}
#galLinks a:hover p img {
visibility: visible;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="galLinks"><a href="#"><p><img src="01.jpg" alt="preview" />Gallery #1</p></a><a href="#"><p><img class="rightLink" src="02.jpg" alt="preview" />Gallery #2</p></a></div>
</body>
</html>