I would like to hover a transparent image over an image ... can get it to work?

[trampt]

Ok. I have an image for each project, and for some projects I have more detailed images of them that I will load into a lightbox. Now, I am looking for a way to incorporate a hover state that overlays a "hover image" that says "click here for more images" when a user mouses over the main image.

<div id="projectImage"><a href="javascript://"><img src="/print-design/image-01.jpg" width="470" height="295" alt="" /></a></div>

What I tried to do was set a background image to the anchor tag, but its not showing up because its behind the image. Anyway of putting it on top of the image instead of behind? Looking for a generic way to do this so the 15 or so projects that have more images I can just wrap in anchor tags, and leave the rest of them alone.

Thanks.

[deathshadow]

I think your problem is you are loading the image as an image. If you fixed the width and height of the container element "projectImage" and displayed your image-01.jpg as it's background, you could then make a empty anchor styled to be the same size, which only shows the image on a mouseover.

The CSS:

.projectImage, .projectImage a {
  display:block;
  width:470px;
  height:295px;
  padding:0px;
  margin:0px;
  border:none;
	text-decoration:none;
}

.projectImage {
  background:url(/print-design/image-01.jpg) top left no-repeat;
}

.projectImage a:hover {
  background:url(/print-design/mouse_over.png) center no-repeat;
}

The HTML

<div id="projectImage"><a href="">&nbsp;</a></div>

That should do what you want... I'd suggest at that size using a small transparent .png or .gif as the mouseover if all you want it to do is add the 'click here' text which is why I set it to centered. If you are going to do more than just the text over the image, set it to "top left" just like the other image. (this also means your mouseover image doesn't have to be the same dimensions, allowing for smaller size and pageload times)

Oh and the space is there 'just to be sure' the anchor gets rendered in all browsers.

Javascript? Who needs javascript?

[trampt]

I tried that and it does work, the problem is I will have to set a seperate class and then background image for 15+ projects in the CSS and I don't really want to do that.

The long story is that I have re-written my site to be completely changed by changing stylesheets, so I am looking for a generic way that can be used in several designs without hard coding images that are design elements into the HTML. I would like a hover state for the image hyperlink to be styled one way with an image in one stylesheet and a completely different way in another stylesheet.

I am probably being too ambitious. There is a way that this lightbox script it doing it and I will try to read through the javascript and css to see how they are doing it. Its probably more on the javascript end.

[trampt]

I've decided to do this for now, which works the way I want it to since I can create different hover images for each project based on the style sheet. I hope someone can come up with a better way using the HTML I posted in my first post.

<div id="projectImage" style="background-image: url(/print-design/image-01.jpg)"><a href="/print-design/large-01.jpg" rel="lightbox[cspgposter]"><img src="/_images/blank.gif" alt="" /></a></div>