Back to CSS Tips
Preview: what the working site looks like.
Wide DC3DC3 Narrow DC3half a DC3
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>      
    <div id="container">
            <a href="#" id="bg1">Wide DC3<span><img src="DC3-wide.jpg" alt="DC3" /></span></a>
            <a href="#" id="bg2">Narrow DC3<span><img src="DC3-narrow.jpg" alt="half a DC3" /></span></a>
    <!--end container--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 40px auto 20px auto;
	overflow: auto; 
	background: #8facdf;
	position: relative;
}
	#bg1, #bg2 {
		height: 30px;
		width: 400px;
		margin: 444px 0 5px;
		display: block;
		line-height: 30px;
		text-align: center;
		color: #fff;
	}
	#bg1 {
		float: left;
		background: #000;
	}
	#bg2 {
		margin-left: 400px;
		background: #444
	}
			#bg1:hover, #bg2:hover  {color: #f00;}
			#bg1 span, #bg2 span {display: none;}
			#bg1:hover span {
				height: 444px;
				width: 800px;
				position: absolute;
				top: 0;
				left: 0;
				display: block;
			} 
			#bg2:hover span {
				height: 444px;
				width: 400px;
				position: absolute;
				top: 0;
				left: 400px;
				display: block;
			}
img {border: none;}