PayneLess Designs - CSS Image Positioning on Hover

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>CSS Image Positioning on Hover</title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Tue, 25 May 2010 05:25:13 GMT">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }

a { color: #0ff; text-decoration: underline }
a:hover { color: #ff0; text-decoration: underline overline; }

body {
background: #000;
color: #fff;
font-family: arial, 'times new roman';
font-size: 12pt;
}

p {
margin: 3% 0;
}

div#wrap {
width: 1000px;
height: 735px;
margin: 0 auto;
}

h1, h3 { text-align: center; }

div#image-row1 {
width: 1000px;
height: 177px;
margin: 0 auto;
/* background: url(images/css_tag-your-friends.png) no-repeat center scroll; */
position: relative;
 border: 0 solid #ff0; /* layout only */
}

/* START Comman Image Styles */
div#image1, div#image2, div#image3, div#image4, div#image5, div#image6 {
position: absolute;
top: 0;
}
/* END Comman Image Styles */

/* START Image One Styling */

div#image1, div#image1 a {
/* height: 735px; */
height: 145px;
display: block;
}

div#image1 { left: 0; width: 165px; height: 175px; border: 1px solid #f00; }

div#image1 a:hover {
background: transparent url(images/css_tag-your-friends.png) -13px 15px no-repeat;
}
/* END Image One Styling */

/* START Image Two Styling */
div#image2, div#image2 a {
/* height: 735px; */
height: 145px;
display: block;
}

div#image2 { left: 167px; width: 165px; height: 175px; border: 1px solid #f00; }

div#image2 a:hover {
background: transparent url(images/css_tag-your-friends.png) -175px 15px no-repeat;
}
/* END Image Two Styling */

/* START Image Three Styling */
div#image3, div#image3 a {
/* height: 735px; */
height: 152px;
display: block;
}

div#image3 { left: 334px; width: 165px; height: 175px; border: 1px solid #f00; }

div#image3 a:hover {
background: transparent url(images/css_tag-your-friends.png) -330px 15px no-repeat;
}
/* END Image Three Styling */

/* START Image Four Styling */
div#image4, div#image4 a {
/* height: 735px; */
height: 152px;
display: block;
}

div#image4 { left: 501px; width: 165px; height: 175px; border: 1px solid #f00; }

div#image4 a:hover {
background: transparent url(images/css_tag-your-friends.png) -475px 15px no-repeat;
}
/* END Image Four Styling */

/* START Image Five Styling */
div#image5, div#image5 a {
/* height: 735px; */
height: 152px;
display: block;
}

div#image5 { left: 668px; width: 165px; height: 175px; border: 1px solid #f00; }

div#image5 a:hover {
background: transparent url(images/css_tag-your-friends.png) -625px 15px no-repeat;
}
/* END Image Five Styling */

/* START Image Six Styling */
div#image6, div#image6 a {
/* height: 735px; */
height: 152px;
display: block;
}

div#image6 { left: 835px; width: 165px; height: 175px; border: 1px solid #f00; }

div#image6 a:hover {
background: transparent url(images/css_tag-your-friends.png) -775px 15px no-repeat;
}
/* END Image Six Styling */
</style>
</head>
<body>
<div id="wrap"><!-- START Page Wrap -->
<h1>CSS Image Positioning on Hover</h1>
<p>This image positioning for different images uses just ONE image. Positioning is done by CSS only! Just mouseover the boxes. Following is the first row of six images across the top of main image:</p>

<div id="image-row1"><!-- START Image Row 1 -->

<!-- START Image One --><div id="image1"><h3>Image One</h3><a href="#no-go"></a></div>

<!-- START Image Two --><div id="image2"><h3>Image Two</h3><a href="#no-go"></a></div>

<!-- START Image Three --><div id="image3"><h3>Image Three</h3><a href="#no-go"></a></div>

<!-- START Image Four --><div id="image4"><h3>Image Four</h3><a href="#no-go"></a></div>

<!-- START Image Five --><div id="image5"><h3>Image Five</h3><a href="#no-go"></a></div>

<!-- START Image Six --><div id="image6"><h3>Image Six</h3><a href="#no-go"></a></div>

</div><!-- END Image Row 1 -->

<p>Link to main image being used (should open in new tab/window): <a href="http://picasaweb.google.com/lh/photo/VVXWea5Jqdf-oI3pyiWIOF_Yu9EpBZmpPf6SSD-s2S0?feat=directlink" onclick="window.open (this.href, ''); return false" title="Tag Your Friends">Tag Your Friends</a>. You'll notice that each image is not spaced evenly from each other. They should be as it will make doing the CSS layout so much easier and you will not have parts of the other images showing at times.</p>

<p>Direct Link: <a href="http://lh3.ggpht.com/_fwimUc8igSk/S_uW9iRN34I/AAAAAAAAD1E/U5K48x8A-oQ/s720/css_tag-your-friends.jpg" onclick="window.open (this.href, ''); return false" title="Direct Image Link">Direct Image Link</a></p>

</div><!-- END Page Wrap -->

<!--
<li id="image2"><a href="#2">Image 2</a></li>
<li id="image3"><a href="#3">Image 3</a></li>
<li id="image4"><a href="#4">Image 4</a></li>

-->
</body></html>