Here we have a tab setup that uses only one background image for the selected tab and a semi-transparent gradient for the background of the panes. Otherwise the whole thing is just simple CSS dimensions, borders, paddings and coloring.
HTML
<div id="panes">
<div>
<img src="pic01_m.jpg" />
<h3>Seagram Building</h3>
<p class="more">The Seagram Building is a skyscraper in New York
City, located at 375 Park Avenue, between 52nd Street and 53rd
Street in Midtown Manhattan. It was designed by the German
architect Ludwig Mies van der Rohe, in collaboration with the
American Philip Johnson.</p>
<p>It is 515 feet tall with 38 stories. Severud Associates were
the structural engineering consultants. It stands as one of the
finest examples of the functionalist aesthetic and a masterpiece
of corporate modernism. It was designed as the headquarters for
the Canadian distillers Joseph E. Seagram's & Sons, thanks
to the foresight of Phyllis Lambert, the daughter of Samuel
Bronfman, Seagram's CEO.</p>
</div>
<div>
<img src="pic02_m.jpg" />
<h3>Barcelona Pavilion</h3>
<p class="more">The Barcelona Pavilion, designed by Ludwig Mies
van der Rohe, was the German Pavilion for the 1929 International
Exposition in Barcelona, Spain. This building was used for the
official opening of the German section of the exhibition.</p>
<p>Mies was offered the commission of this building in 1928 after
his successful administration of the 1927 Werkbund exhibition in
Stuttgart. The German Reich entrusted Mies with the artistic
management and erection of not only the Barcelona Pavilion, but
for the buildings for all the German sections at the 1929
Universal Exhibition.</p>
</div>
<div>
<img src="pic03_m.jpg" />
<h3>Neue Nationalgalerie</h3>
<p class="more">Neue Nationalgalerie at the Kulturforum is a
museum for classical modern art in Berlin, with main focus on
early the 20th century. It is part of the German National Gallery.
The museum building and its sculpture garden were designed by
Ludwig Mies van der Rohe and opened in 1968.</p>
<p>The collection features a number of unique highlights of modern
20th century art. Particularly well represented are Cubism,
Expressionism, the Bauhaus and Surrealism. The collection owns
masterpieces of artists like Pablo Picasso, Ernst Ludwig Kirchner,
Joan Miró, Wassily Kandinsky and Barnett Newman.</p>
</div>
</div>
<!-- navigator -->
<div id="nav">
<ul>
<li><a href="#1"> <img src="pic01_s.jpg"/> <strong>Seagram Building</strong> New York City, USA </a> </li>
<li><a href="#2"> <img src="pic02_s.jpg"/> <strong>Barcelona Pavilion</strong> Barcelona, Spain </a> </li>
<li> <a href="#3"> <img src="pic03_s.jpg" /> <strong>National Gallery</strong> Berlin, Germany </a> </li>
</ul>
CSS
/* navigation */
#nav { background:#ddd url(h300_reverse.png); border-bottom:1px solid #CCCCCC; height:156px; width:745px; }
#nav ul { width:600px; margin:0 auto; }
#nav li { border-right:1px solid #ddd; float:left; padding-left:1px; width:175px; list-style-type:none; text-align:center; margin-top:0px; }
#nav a { color:#333333; display:block; padding:17px; position:relative; word-spacing:-2px; font-size:11px; height:122px; text-decoration:none; }
#nav a.current { background:url(down_large.jpg); }
#nav img { background-color:#fff; border:1px solid #ccc; margin:3px 0 5px 27px; padding:4px; display:block; }
#nav strong { display:block; font-size:13px; }
/* panes */
#panes { background:#fff url(h300_reverse.png) repeat scroll 0 0; border-color:#ccc; border-style:solid; border-width:1px 1px 0; width:743px; height:255px; margin-bottom:-20px; padding-bottom:20px; position:relative; }
#panes div { display:none; position:absolute; top:20px; left:20px; font-size:13px; color:#444; width:650px; }
#panes img { float:left; margin-right:20px; }
#panes p.more { color:#000; font-weight:bold; font-size:13px; }
#panes h3 { margin:0 0 -5px 0; font-size:22px; font-weight:normal; }
.overlay { display:none; width:500px; padding:20px; background-color:#ddd; }
Javascript
$(function() {
$("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});
