PBase

I'm using the alexc stylesheet, and I want to modify it so that when the mouse hovers anywhere over the thumbnail (including the caption) a border appears. Everything I've tried resizes the thumbnail area on mouseover. I've spent an inordinate amount of time trying to figure this out, and I've searched the forum as well. Is there a straightforward way of doing this? Thanks in advance for any help.

http://www.pbase.com/nkhare/road_trip_2004

See if this works for you. I added a hover frame. And, a frame for the photo. And, changed the ugly color for the first letter in the title. Anyway, you can customize the colors as you see fit! Also, you might want to consider re-sizing your photos. That's been discussed often in these forums .

<!--
/* modified alexc*/
BODY
{
color: white;
background-color: #333333;
font-size: 7pt;
}

DIV,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,FONT, CENTER
{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: white;
}

font
{
color: #AAAAAA; letter-spacing: 2px; font-size: 8pt;
}

h2
{
font-size: 14pt;
font-weight: normal;
text-align: right;
letter-spacing: 8px;
padding-top: 15px;
padding-bottom: 15px;
margin-left: 2px;
margin-right: 2px;
background-color: black;
color: white;
}

h2:first-letter
{
color: #ffcc66;
font-weight: bold;
font-size: 22pt;
}

h4
{
color: #44dd44;
font-size: 11pt;
}

I
{
color: #888888;
}

TEXTAREA
{
background-color: #EEEEEE;
font-family: times new roman;
color: black;
scrollbar-base-color: gray;
scrollbar-3dlight-color: black;
scrollbar-highlight-color: none;
}

A, TD.A, A:link
{
color: #FFCC00;
text-decoration: none;
}
A:hover { color: #00FF00; text-decoration: underline; }
A:visited { color: #FFCC66; }
A:active { color : #d5ae83; }

.caption
{
font-size : 18pt;
color : #bbbbbb;
font-weight: bold;
}

TD
{
background-color: #333333;
}
TD.thumbnail
{
vertical-align: middle;
background : #333333;
}
a.td.thumbnail, a:link.td.thumbnail, a:visited.td.thumbnail, a:active.td.thumbnail {
border: rgb(0, 0, 0) 1px solid;
margin-bottom: -50px;
padding-top: 5px;
width: 185px;
display: block;
background: rgb(10, 10, 10);
height: 210px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
a:hover.td.thumbnail {
border: rgb(255, 204, 102) 1px solid;
margin-bottom: -50px;
padding-top: 5px;
width: 185px;
display: block;
background: rgb(0, 0, 0);
height: 210px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
.thumbnail
{
border: 3px RIDGE #999999;
background-color: black;
}
.display
{
background-color: black;
border: 12px RIDGE #d8d8d8;
}
BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}


BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}
-->

I'll give it a try this weekend. Thanks for the help!