image fade in onmouseover

kidreapertronV · June 24th, 2009, 04:20 PM

Hello all,

I've been working on a site for a really great non-profit organization for a couple of years now, and we've recently added a section where you can view quilt squares. There is a functionality where you hover over the small image of a quilt square, and a bigger image pops up.

What I've come up with is pretty rudimentary, just CSS. You can view it here. http://www.iopo.org/donation_stories...bner_test.html. The only relevant section in the html to the code is:

HTML Code:

<div id="video_placeholder">
     <a class="thumbnail" href="#thumb"><img src="thumbs/abner_barbara_r.jpg" alt="Barbara Abner Quilt Square" width="238" height="134" border="0" /><span><img src="http://webforumz.com/images/abner_barbara_r.jpg" width="700" height="700" alt="Barbara Abner Quilt Square" /><br />Barbara Rose Abner, 1949-2002</span></a>
</div>

The css that makes it work is in the head of that page, for now.

What I'd like to do is have the large image fade in when it appears, instead of just harshly appearing.

I'm not very good with javascript yet, but any help would be greatly appreciated.

Thanks so much!

Dubbs · June 25th, 2009, 10:48 AM

You may want to look into a script like Lightbox.

kidreapertronV · June 25th, 2009, 11:27 AM

Thanks Dubbs! Ironically, that's what I originally had in mind, but I didn't know what it was called or how to find it.

Thank you, thank you, thank you!