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

Duncan Hill dunkaz at gmail.com
Wed Dec 10 16:01:37 CST 2008

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.


CSS is simple on it ....



More information about the thelist mailing list