with Lorelle and Brent VanFossen

CSS Unleashed – Experiments Showcasing Your Photography

As nature and travel photographers, we are always looking for interesting ways to showcase and display our photographs and images, whether on their own in a photo gallery display online or within our articles. These are some examples of the CSS experiments with CSS design that we’ve been working on to showcase and display our photography, and to give you some ideas for your own CSS experiments with displaying photographs and images in your website, blog, photoblog, or photo gallery.

As with all CSS experiments, these are overcoded and may not work exactly the same on all browsers. We do our best to make sure our CSS and HTML meets web standards compliance, but not all browsers are equal. Test these thoroughly to make sure they withstand the rigors of your design needs.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

Bugling Elk

Elk bugling in Jasper, Alberta, Canada, Photograph by Brent VanFossen

Photograph by
Brent VanFossen
Jasper, Alberta, Canada
During the fall, rut season begins and elk do amazing things like strutting and stomping and bugling. Brent photographed this elk early in the morning right outside of the small town of Jasper in the Canadian Rockies.
Brent used the Nikon F4 SLR 35mm camera with a 500mm lens with a 1.4x teleconverter. The film was Fuji’s Sensia 100 slide film.
 

Marmot babies kissing and sniffing each other, photograph by Brent VanFosen

Kissing Babies
Late spring brings out the marmot babies, peeking out from their holes in the grounds of the high alpine mountains. Caution soon gives over to rollicking play as they scamper about, darting in and out of the various burrows of their underground condominiums. These two cute fellows sniff each other prior to wrestling and rolling down the hill.

Photograph by Brent VanFossen
Olympic Marmots (Marmota Olympus)
Hurricane Ridge, Olympic National Park, Washington State, USA
Photographed using a Nikon F4 camera body with a 500mm f4 lens plus a 1.4x teleconverter
 

WILD THING, I THINK I LOVE YOU

orang12a.jpg - 12120 Bytes

Animals are such agreeable friends, they ask no questions, they pass no criticisms.
George Eliot

The camera always points both ways. In expressing the subject, you also express yourself.
Freeman Patterson

 

TOLEDO, SPAIN
Sunrise on Ancient City. The moment was perfect. We arrived early in the morning or late in the night, whichever is closer to 3AM, praying for a moment such as we received. The pre-dawn colors were intensly vibrant pinks and fushias, casting the adobe colored buildings into vibrant tones. The shutter whirred and clicked as Brent captured each moment of the quickly changing light.

Sunrise on Toledo, Spain, photograph by Brent VanFossen

 

NOTE: The following CSS experiments and designs use the flipv and fliph horizontal and vertical flipping filters and a variety of other filters such as shadows. These work in Internet Explorer and other browsers as they are proprietary to Microsoft, so they don’t work well in Firefox. We are currently working on new versions that will work in Firefox as well as other browsers. Until then, the rest of this page of css experiments are best viewed with something other than Firefox. Such is the challenge of working with CSS experiments.

SNOWSHOE HARE ( Lepus americanus)Snowshoe Hare, photograph by Brent VanFossen Photograph by Brent VanFossen, Olympic National Park. Washington State, USA
 

Grizzly Bear, photograph by Lorelle VanFossen

GRIZZLY
BEAR
PHOTOGRAPH BY LORELLE VANFOSSEN
 

Famous Blue Mosque of Istanbul, photograph by Brent VanFossen
Blue Mosque of Istanbul

Built in the early 1600s, the Sultan Ahmet Mosque is also known as the Blue Mosque. The nickname comes from the extensive blue-stencilled tiles decorating the inside upper levels. The mosque is considered a masterpiece by the Ottoman architect Sedefkar Mehmet Aga, principle architect for many of the surviving wonders of Istanbul. The building hosts 260 windows which fill the mosque with natural light, and the tallest dome is 43 meters high and 33.4 meters around. Among the various domes, the building features an unsual six minarets. It is considered one of the architectural wonders of Istanbul.

© Photograph by Brent VanFossen
 

Nature and Travel Photography

Brent VanFossenDrops of water on grass, photograph by Brent VanFossen

 
 

Birds in flight at Bosque del Apache, New Mexico, photograph by Brent VanFossen
 

Birds in flight at Bosque del Apache, New Mexico, photograph by Brent VanFossen
 

Butterfly photograph by Brent VanFossen

Butterfly by Brent VanFossen

“Happiness is a butterfly, which when pursued,
is always just beyond your grasp, but which,
if you will sit down quietly, may alight upon you.”
~~Nathaniel Hawthorne

Butterflies have always enchanted us with their ethereal nature. They work so hard as caterpillars, spend ages transforming themselves into winged creatures, and then live a short life as a butterfly before beginning the process over again, starting with death.

 

Egrets on nest with chicks, Florida, Photograph by Brent VanFossen

Those little nimble musicians of the air, that warble forth their curious ditties, with which nature hath furnished them to the shame of art. ~ Izaak Walton

There is nothing in which the birds differ more from man than the way in which they can build and yet leave a landscape as it was before. ~ Robert Lynd, The Blue Lion and Other Essays

 
Egrets on nest with chicks, Florida, Photograph by Brent VanFossen
Birds sing after a storm; why shouldn’t people feel as free to delight in whatever remains to them? ~Rose F. Kennedy

A bird does not sing because it has an answer. It sings because it has a song. ~Chinese Proverb

 

Peeking Out From Under
Nature
and
Travel
Photography
by Brent
VanFossen

Frog peeking out of duckweed, photograph by Brent VanFossen

Moving through the wetlands quickly, swatting at mosquitos, it is easy to overlook the small things. But once noticed, your attention moves from blood sucking mosquitos to enchantment.
© Brent VanFossen, VanFossen Productions
 

White Pelican, photograph by Brent VanFossen
 

White Pelican
Florida, USA

White Pelican, photograph by Brent VanFossen

Photograph by Brent VanFossen
© VanFossen Productions

 

Orangutan, Florida, Photograph by Brent VanFossenOrangutan, photograph by Brent VanFossen
 

In the next three designs of our CSS experiments with showcasing and displaying your photographs and images, we used a hover state to change the background color of the link. The links here are dummy links, but they still take on the action of the hover when the mouse passes over them.

The first one below doesn’t have the link, though it could be added. The next one is a variation on the same theme and features the link with the hover feature. Move the mouse over the text to change the background color of the text container. The bottom pure CSS experiments design also features a hover in which the background color changes when the mouse passes over.

Butterfly photograph by Brent VanFossen

Insects
Grizzly Bear photograph by Lorelle VanFossen

Mammals
Grand Canyon photograph by Brent VanFossen

Travel
 

 

Butterfly photograph by Brent VanFossen

VanFossen Productions offers a wide range of butterfly and other insect photographs.

Grizzly Bear photograph by Lorelle VanFossen

We specialize in photographing large and small mammals, especially North American wildlife images.

Grand Canyon photograph by Brent VanFossen

As nature and travel photographers, our life on the road has taken us all over North America, Europe and the Middle East.

 

Photography Within a Photograph
This CSS experiment features a photograph in the outside container with a repeating background image, and an inside container with a white background so the content sits inside the first container photograph like a frame.

Ferns, photograph by Brent VanFossenA shadow is created to make the inside container look like it is covered by the outside container and photograph with a silver border on the inside container with a top and right border of 3px and the other two borders at 2px.

We’ve included a small photograph of the background image to show the versatility of this CSS design. The photograph features a fern photographed against clover by Brent VanFossen.

 

WATER DROPS

This is an example
the white space and
the same technique

ON PLANTS

of a paragraph that crosses
the photograph keeping
going.

 

Nature Images by The VanFossens
American Alligator, Florida, photograph by Brent VanFosen
American Alligator
by Brent VanFossen
Butterfly photograph by Brent VanFossen
Butterfly
by Brent VanFossen
Baby Blue Eye Flower, photograph by Brent VanFossen
Baby Blue Eyes Flower
by Brent VanFossen
Caterpillar, photograph by Brent VanFossen
Caterpillar
by Brent VanFossen
herons making nest, photograph by Brent VanFossen
Herons Builting Nest
by Brent VanFossen
Grizzly Bear, photograph by Lorelle VanFossen
Grizzly Bear
by Lorelle VanFossen
 

This next example includes techniques from Pixy’s No Pre-Load Images and the SimpleBits example of a zoomed image. Move your mouse over the photograph and it will “zoom” to a larger size. Move away and it will go back to the smaller size.

View photo
ZOOM! Photo Gallery

To see the image “zoom” to a larger size, move the mouse over it.

This is a more interactive version of CSS experiments with photographs and image displays and galleries. To see a larger version of an image, like from a thumbnail version to a “full-sized” version, usually the user clicks on a graphic of the thumbnail and is taken to a new “page” view of the graphic itself. The surrounding “page” only holds the graphic so there is no information about the photograph or anything. If the designer doesn’t want to create a separate page for every graphic to hold information about the larger photograph, the viewer is stuck with a blank page of just the graphic image on it. Boring.

This technique involves a single graphic image of two sizes of the same photograph located within an anchor. To see the graphic example, click on the photograph. When you move the mouse over the anchor (link), the CSS hover command changes the positioning of the image to reveal the larger sized image and changes the width and height of the container. This novel effect can replace the “click to see a larger size” process, allowing viewing of the larger version of the image while staying on the same page with the matching content. Wonderful!

There are some limits to this CSS experiment and design technique. There can be no other links within the container unless some design modifications are made. Two separate images may actually be smaller in file size than the single larger image because of the excess space. It also shifts the text content around which could mess up your layout (as shown with the title if the window is narrow). Unprepared viewers can get a bit startled by the effect. Otherwise, it’s a fun idea.


Another Twist on Displaying Images with Javascript

New techniques in CSS experiments are coming out all the time using Javascript and Ajax to enhance your photographs and images. Here is a list of some interesting methods to experiment with:

2 Comments

  • Posted June 30, 2005 at 8:16 | Permalink

    Thanks for the incredible css photo display ideas and layout. It sure takes the dull and ordinary up several levels. I love learning from y’all . . .

  • Posted February 11, 2006 at 14:24 | Permalink

    I was an absoulte idiot , i din come across this site EARLY .
    Man , its content rocks , i love entire site with its look , articles , man , this is great .
    What do u know , i have to tell my friends about this wonderfull site .

3 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>