Zoom dynamic image thumbnails?

[Guest]

What is the best approach to create a zoom effect on image thumbnails in a repeat region?

The original size of all images is 105px x 105px.  I want them to initially appear very small (30px x 30px) and when hovered, zoom to the original size.  I'd like to do this through CSS and without affecting anything else on the page.  It may be a combination of CSS and javascript...(?)

[BenPleysier]

Somthing like this http://labs.adobe.com/technologies/spry/demos/gallery/index.html?

Ben

[Guest]

Yeah, something like that, minus the large photo to the right and navigation buttons.

Basically, I have a single row repeat region with multiple columns.  I'd like to add a 30px x 30px dynamically binded image placeholder in one column that enlarges to it's original 105px x 105px size via rollover or hover with CSS and/or javascript, whichever is easiest and best.

[BenPleysier]

Use the Grow/Shrink Spry effect, see here http://labs.adobe.com/technologies/spry/samples/effects/fade_grow_sample.html

I hope this helps.

Ben

[Guest]

Other than CS3's spry menus, I'm unfamiliar with spry and from what I have experienced, it's quite heavy in code that ends up useless to me. As it is, using the new spry feature in CS3 has slowed the loading of my horizontal menu considerably, even though I've trimmed the code quite a bit.

I was hoping for a simple way of doing this with CSS and/or javascript.  I hand-code a lot, so that doesn't bother me.  I just need to be pointed in the right direction to get started.

The rollover images on the link for the Grow/Shrink spry effect did some bizarre things for me (?).

[Guest]

I found what I was looking for!

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/