Delaying Impact overlays

I'm in the process of revamping my local residents' association's old RW website, using Foundation 6 and TCMS (TCMS is to be gradually implemented).

To make some pages more interesting I'm using the Impact stack to display a background, sometimes with a single image, sometimes with a slide show. I've implemented this on two pages so far, and it works.

However, I would like to delay the display of the material that is on top of the images, so that visitors get a chance to see the images fully first and then let the overlaid material emerge.

All that material (menu, headers etc) is contained in a container placed on top the Impact stack, so if I can delay the display of that container I should get the effect that I want.

I've tried achieving this by activating two different swatches in my site styles partial: Transition and Animate Timing. I've given the Transition swatch the class "transition" and the Animate Timing swatch "timing" and have in both cases set the speed to 2000ms and the delay to 4000ms, in order to have time to properly see any effect.

I have then tried both, by putting "transition" or "timing" in the container's Custom Classes box. However, nothing happens.

Am I doing this totally wrong or do I need something else to achieve what I'm after? I'm still very much a newbie when it comes to using swatches and classes.

If you want to see my work in progress, you can go to https://sandbox.ctraa.org.uk

The two pages where I currently have the Impact stack are "Home" and "Then & now" (submenu to "Pics & slideshows").

Best regards
Thomas Blomberg, London

2 replies