Hiding logo and banner image after a few seconds but only in desktop and tablet mode

Bit of a newbie question here.

I am designing a responsive website for my girlfriend. I am using RapidWeaver 6.4, Foundation and a bunch of Joe Workman Foundation stacks.

Her request is that she would like her company logo and the banner image to display for about 5 - 10 seconds and then fade away so only the text is visible. I know I can hide the logo and banner when viewed on a smartphone, but how can I achieve this disappearing effect for only desktop and tablet mode? Oh, I should add that I hope all the text below the images would then slide on up to fill the empty gap.

Any suggestions would be greatly appreciated. I would like to avoid purchasing any new stacks at the moment (but I have purchased the Foundation Starter Pack, and add-on packs 1 & 2 as well as Cycler, Expose, Sweet Button and if I can use one of them, it would be fantastic!

Thanks in advance for any suggestions!


If you try Big White Duck’s new Sections Pro stack (it is free but donations are encouraged). He has animation options in it that would let you do this. It is a fairly involved stack so downloading the demo aliong with it would be useful.

Thank you Jason!

This just might do the trick. Looks like I have some serious reading and experimenting to do.

Much appreciated!


1 Like