[thelist] Image with cynamic text rollover... back to 'basics'! ; -p

[Duncan Hill]

On Wed, 10 Dec 2008 10:18:07 -0000, Tris <beertastic at gmail.com> wrote:

> Hi all..
>
> I've been asked to add a rollover to a site.
> all good. but it's a little more complicated and i've not touched
> rollovers in a while..
>
> We've got a series of images being called from a DB.
> The client now wants to put each images tagline over the image, when
> rolled over.
> AND to add an opaque layer to teh text.
>
> for example, if the image is of a tree, then roll over the tree and
> have it go slightly white (opaque layer) with the words. 'A tree' over
> the top nicely positioned in the middle..
>
> Each image has it's own tagline....
>
> I'm reading about PHP's GD library at the mo.. as a way of simply
> creating the second image, as do a simple rollover replacement..
> but what I'd liek to do it to use CSS and jacasvript to dynamically
> put a layer on top..
>
> Google is not my friend today... has anyone doen this before?

Hi Tris,

I have something like that effect, except in reverse, the static has the  
opaque layer and clears on mouseover.
Just uses two images with one contained in a <span> in an li.
Simple css and the only javascript is to kick IE6 a little bit for the  
pseudo classes using the sfhover script as in suckerfish.

http://www.gfs-metalworks.com/metalwork-picture-gallery.php

CSS is simple on it ....

http://www.gfs-metalworks.com/_private/overlay.css

Duncan