Still working on that photo gallery. :) I found a site that helped me in creating a photo gallery I like, but I need to put a "hover" on the thumbnails so that the user knows where they are. I'd like to have it change the opacity, but a) I'm not sure how accepted that is amongst the browsers and b) if it is, I'm sure how to do it, or where to place it in my CSS.
John,
I can think of two ways to create the effect you're looking for:
1) Overlay your thumbnail with a screen -- a checkerboard of opaque pixels on a transparent background. (The effect varies dramatically with the pixel hue & shade.) In order to get this to overlay the thumbnail you'd need an extra element in your markup (an extra anchor to accommodate IE which doesn't honor :hover on anything else) to lie on top of the image. Here's my guess at the code:
<div class="thumbframe">
<img src="something.jpg" />
<a class="screen" href="#"></a>
</div> div.thumbframe
{
position: relative; /* to contain the absolute child */
}
div.thumbframe img
{
width: 150px;
height: 100px;
}
div.thumbframe a.screen:hover
{
display: block;
position: absolute;
top: 0;
width: 150px; /* same as thumbnail size */
height: 100px; /* same as thumbnail size */
background-image: url("screen.jpg");
}2) Swap the thumbnail with a modified version. Duplicating the number of thumbnails can be an eye-roller -- for you it means managing twice as many images and for the user it means waiting for those additional downloads. One way around this is to combine both the normal and hover-state thumbnail in the same image file, likely to be less than twice the size of a single thumb. On hover, change the position of the photo within its frame so that the modified half comes into view. Done with CSS, this means either making the thumbnail the background image of its frame and changing its background-position on hover, or placing a foreground image into a frame set to overflow: hidden and then changing the photo's margins to shift the normal thumb out and its Siamese twin into view.
Paul
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
