CSS Based Image Galleries

CSS Based Image Galleries

Today I am going to share some CSS based galleries and FLASH based galleries, so You can easily choose your scripts that You got interest in. I think here You will find gallery for every needs, should be enough to choose from!

– Sliding Photograph Galleries

Sliding Photograph Galleries

It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

– Photo scroll gallery

Photo scroll gallery

A combination of several of my previous galleries to give a scrolling ‘thumbnail’ image, a medium size image on hover and a full size image on click. The thumbnail, medium size and full size images are all the same image just resized using CSS. The thumbnails are square to make the scrolling area simpler to work with. This does make these images a little distorted but not so much that they look wrong.

– Hoverbox Image Gallery

Hoverbox Image Gallery

Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. It uses an anchor link for the effect, because that is the only thing that Internet Explorer allows the :hover psuedo-class to work with. While my example page only has # linked to, this could easily be pointed to a full version of the respective images, or a website if you decide to use it for a design portfolio.

– CSS Image Gallery

CSS Image Gallery

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

– Cross Browser Multi Page Photograph Gallery

Cross Browser Multi Page Photograph Gallery

Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version does not use javascript but is pure CSS and still works in IE.

I shouldn’t have to explain this, but… for those of you who think that flowers are those things with petals etc .. they’re not. Crossword fans like me will know that they are things that flow … like rivers. Sorry for the misunderstanding ;o) Just hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally, on the Portraits and Landscapes, click the image to open a new window showing the 640 x 480 pixel version.

Tested in IE5.5, IE6, IE7, Opera, Firefox, Safari (PC).

– A simple CSS photo album

A simple CSS photo album

he text numbers and images are held in an unordered list without any extra markup (no ‘ems’ or ’spans’ etc). The CSS just styles the text numbers so that they appears in a box and the images so that they are hidden until your visitor clicks a number square.

– A Photograph Gallery

A Photograph Gallery

Just a simple :hover over thumbnail images to give a full size view of each photograph. With all but Opera you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture. Ideal for photograph albums.

Share It

Related Posts