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.
- CSS Unleashed - Experiments with CSS Designs
- CSS Book Recommendations
- CSS Experiments Playing With CSS Blocks
- CSS Experiments with CSS Logo Designs
- CSS Experiments with Background Images and Backgrounds
- CSS Experiments with Lists, Menus, Tables of Content, and More
- CSS Experiments - Web Fonts and Embedded Fonts
- CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
- CSS Unleashed - Experiments Showcasing Your Photography
- CSS Experiments - Variations on a Theme
- CSS Experiments - How They Were Done and More
- CSS Experiments Putting It All Together
Brent VanFossen
Jasper, Alberta, Canada
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.
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
George Eliot
The camera always points both ways. In expressing the subject, you also express yourself.
Freeman Patterson
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.
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.
Photograph by Brent VanFossen, Olympic National Park. Washington State, USA 
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.
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
A bird does not sing because it has an answer. It sings because it has a song. ~Chinese Proverb
and
Travel
Photography
by Brent
VanFossen
Florida, USA
© VanFossen Productions
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.
VanFossen Productions offers a wide range of butterfly and other insect photographs.
We specialize in photographing large and small mammals, especially North American wildlife images.
As nature and travel photographers, our life on the road has taken us all over North America, Europe and the Middle East.
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.
A 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.
This is an example
the white space and
the same technique
of a paragraph that crosses
the photograph keeping
going.
American Alligator
by Brent VanFossen
Butterfly
by Brent VanFossen
Baby Blue Eyes Flower
by Brent VanFossen
Caterpillar
by Brent VanFossen
Herons Builting Nest
by Brent 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.
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:
Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.
You can find related articles to this topic in our Web Pages and CSS Tips and Tricks and Photographycategories. The previous post is CSS Unleashed - Experiments with Background Images and Backgrounds and the next post is CSS Unleashed - Experiments with CSS Logo Designs. CSS Unleashed - Experiments Showcasing Your Photography, Issue Number 155, by Lorelle VanFossen, was updated September 2nd, 2006.
You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.
Article Series - CSS Experiments
- CSS Unleashed - Experiments with CSS Designs
- CSS Unleashed - Variations on a Theme
- CSS Unleashed - Experiments Playing With CSS Blocks
- CSS Unleashed - Experiments with Background Images and Backgrounds
- CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More
- CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
- CSS Unleashed - Experiments Showcasing Your Photography
- CSS Unleashed - Experiments with CSS Logo Designs
- CSS Unleashed - Experiments Putting It All Together
- CSS Experiments - How They Were Done and More
Next: CSS Unleashed - Experiments with CSS Logo Designs
Previous: CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
Related Articles
- Using CSS to Create a Photo Gallery
- CSS Unleashed - Experiments with CSS Logo Designs
- CSS Unleashed - Experiments Playing With CSS Blocks
- CSS Unleashed - Variations on a Theme
- CSS Experiments - How They Were Done and More
- CSS Unleashed - Experiments with Background Images and Backgrounds
- CSS Experiments - Web Fonts and Embedded Fonts
- CSS Tips and Tricks
Submit Article: BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2
June 30, 2005
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 . . .
February 11, 2006
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 .