Since Orbit executes through Javascript, before it kicks in you might see your images or content all stacked on top of each other. To avoid this you can make use of a property of Orbit: it adds a class of .orbit once it executes, meaning you can target your div#featured with specific styles that will be overridden when the class is added.
For example, if we want Orbit to load a simple light grey screen with a spinner, the CSS would look like this:
CSS:
#featured { background: url(spinner.gif) center center #f4f4f4 no-repeat; height: 300px; }
#featured img { display: none; }
#featured.orbit { background: none; }
#featured.orbit img { display: block; }
We hide the images by default, and give the #featured block a fixed height and background with a spinner. Once Orbit loads the images are displayed and we remove that background.
Taken from: http://foundation.zurb.com/docs/v/3.2.5/orbit.php