shepherdweb.com

Summary

I implemented this effect on a friend’s photo’s page about 3 years ago using javascript; I decided to go back and see if I could duplicate it same effect using only CSS. After fiddling with it for a little while…success! I was delighted to learn that it even works in IE 5.2.3 for Mac. I did not test earlier versions of IE.

Visual

see the demo »

XHTML


<img src="bgphoto.jpg" width="700" height="508" border="0" id="bgphoto" />
<a id="pic_krispy_kreme" href="#"></a>
<a id="pic_shane_camping" href="#"></a>
<a id="pic_strange_deer" href="#"></a>
<a id="pic_summer_camping" href="#"></a>
<a id="pic_summer" href="#"></a>
<a id="pic_venice" href="#"></a>


CSS

body { margin: 0; padding: 0; background-color: #FFC; }
h1 { margin: 20px; padding: 0; height: 60px; }
a img { border: 0; }
#content
{
width: 700px;
height: 528px;
margin: 0 20px;
padding: 20px;
border: 1px solid #1E2D28;
background-color: #FFF;
}
#bgphoto { position: absolute; z-index: 1;}
#content a { position: absolute; z-index: 2; }
a#pic_krispy_kreme
{
top: 428px;
left: 163px;
width: 155px;
height: 139px;
background-image: url(krispy_kreme.jpg);
background-repeat: no-repeat;
}
a#pic_shane_camping
{
top: 226px;
left: 539px;
width: 119px;
height: 80px;
background-image: url(shane_camping.jpg);
background-repeat: no-repeat;
}
a#pic_strange_deer
{
top: 313px;
left: 536px;
width: 121px;
height: 81px;
background-image: url(strange_deer.jpg);
background-repeat: no-repeat;
}
a#pic_summer_camping
{
top: 400px;
left: 533px;
width: 116px;
height: 80px;
background-image: url(summer_camping.jpg);
background-repeat: no-repeat;
}
a#pic_summer
{
top: 385px;
left: 342px;
width: 89px;
height: 124px;
background-image: url(summer.jpg);
background-repeat: no-repeat;
}
a#pic_venice
{
top: 121px;
left: 203px;
width: 268px;
height: 207px;
background-image: url(venice.jpg);
background-repeat: no-repeat;
}
a#pic_krispy_kreme:hover,
a#pic_shane_camping:hover,
a#pic_strange_deer:hover,
a#pic_summer_camping:hover,
a#pic_summer:hover,
a#pic_venice:hover
{
background-image: none;
}