How to do this image transition

[grooveepants]

Hi,

I am trying to replicate the image transition on this website:

www.floorsofdistinction.com.au

and I don't have a clue about html/css/etc.

The source code for it (I think) is this:

<div class="divider"><!-- &nbsp; --></div>

<div class="container">
<div id="content" class="clearfix">
<div id="column-left">
<div id="banner">
<div id="slideshow">
<img src="images/core/banner01.jpg" alt="Banner Image" />
<img src="images/core/banner02.jpg" alt="Banner Image" />
<img src="images/core/banner03.jpg" alt="Banner Image" />
<img src="images/core/banner04.jpg" alt="Banner Image" />
</div>
</div>
</div>

Does anyone here know how to do this effect with the images fading over the top of each other. I am trying to create a website which has no flash in it.

Cheers.

WB

[Beakers]

Without flash you would likely want to use jQuery.

http://www.geeksucks.com/toolbox/23-...out-effect.htm

Has some image fade stuff, I'm not that brilliant with jQuery, but most the time it just needs included into your page along with whatever you choose to use.

[MyFriendIsATaco]

They are using jQuery, and this is the snippet of custom code for their slideshow:

    //slideshow
$('#slideshow').cycle({fx: 'fade', timeout: 5000, speed: 2000});

[grooveepants]

Thanks guys.

I ended up using the jquery (two types)...

... one on the home page and one in the gallery.

U can see it here www.functionandform.com.au

Thanks again.

WB

[Beakers]

It looks good.

However you have a small list circle at the bottom left of your pictures.

Quick fix, in your CSS add: li {list-style-type:none;}