Create a pure CSS image gallery
TAKE YOUR FAVOURITE IMAGES AND PRESENT THEM IN AN ONLINE GALLERY WITH LITTLE MORE THAN AN UNORDERED LIST AND A LITTLE CSS
TAKE YOUR FAVOURITE IMAGES AND PRESENT THEM IN AN ONLINE GALLERY WITH LITTLE MORE THAN AN UNORDERED LIST AND A LITTLE CSS
Click here to download all the source files for this tutorial http://www.webdesignermag.co.uk/?page_id=85
THERE ARE MANY ways to code an online image gallery, with many using JavaScript and/or PHP. However, a great alternative is to introduce pure CSS. An all-CSS image gallery gives great compatibility across platforms and is pretty much guaranteed to work as you want. Alternatively, if you are like us, we just love using CSS to get a job done. The premise of the CSS image gallery to be created involves getting an unordered list of images styled into a professionallooking photo gallery. As you might expect, images are a major influence, and for this tutorial we have resized all the images to give a uniform look and feel. In addition, each image is assigned a thumbnail that instantly offers up its big brother the precise moment the cursor makes its way over the thumbnail. The beauty of creating an image gallery with CSS is that it is open to all sorts of modifications. Rearrange the thumbnails, resize the container, style up text and borders and customise image positions with a few quick and simple code changes.
01 Resize images
A CSS image gallery, as you might expect, contains predominately images. Before heading into any coding, the images to be used for the gallery need to be brought together in a single location. Create a folder on the desktop and transfer the desired image to the folder. For the purpose of this tutorial, we are going to resize each image in two forms: one for the main image and a thumbnail version. Open your image editor of choice and resize the image to create the two versions just mentioned. Rename the thumbnail with the same name as the main image but with the addition of ‘tn’ to differentiate between the two images. To present the images in a uniform manner, it is preferable to resize all main images and thumbnails to the same dimensions. A good size for the thumbnails is 80 x 80 or 90 x 90 pixels. This retains enough of the original image for users to view. The main images are going to be presented in the portrait format with a width of 450 pixels and a height of 350 pixels. The dimensions for all images are open to interpretation, but it is a good idea to decide beforehand and stick with original measurements.
02 New document
Now head to the File menu and create a new document (New>HTML>None>Create). Make sure that the DocType is XHTML 1.0 Transitional. The first issue is to style up the body tag ready for any text that is to be used within the image gallery. Head to the Modify menu, select Page Properties and define the Page font. Preferably, choose either Georgia, Verdana or Arial for consistency and support. Now select a font size, ie 14 pixels. The pixel option is perfectly okay, but being a fixed size it does not offer the flexibility or the accessibility of the ems measurement. We have chosen to stick with the pixel option, as there is only to be one text style. Now choose a colour. This should be a good contrast to the background, ie black on white.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
Hi,
I have reproduced the code but at the point where the large images are to be hidden in 1 pixel it doesn’t seem to work. I have gone through the code with a comb and I cannot find an error. I am a novice at this and desperately need some help. I am using Dreamweaver CS4 would this affect the code?
gallerytut
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #000;
}
body {
background-color: #FFF;
}
#container {
height: 450px;
width: 550px;
}
#container ul {
padding:0;
margin:0;
list-style-type:none;
background-color: #000;
}
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.photoa {
background:url(Images/Angry-Mouse-Sketch.jpg);
height:80px;
width:80px;
}
#container a.photob {
background:url(Images/Maisy.jpg);
height:80px;
width:80px;
}
#container a.photoc {
background:url(Images/Life_drawing.JPG);
height:80px;
width:80px;
}
#container ul {
width:180px;
height:340px;
}
#container li {
float:left;
}
#container a.gallery:hover span {
position:absolute;
width:450px;
height:350px;
top:10px;
left:170px;
color:#000;
background:#fff;
}
#container a.gallery:hover { border:1px solid #fff;}
<!–
This is where the accompanying text for the image is to be placed
This is where the accompanying text for the image is to be placed
This is where the accompanying text for the image is to be placed
–>
OK after pulling my hair out I actually solved it. Something I have experienced with other types of coding like VBA and SQL. BEWARE OF COPYING AND PASTING. It was the quotation marks around the a class gallery photoa. Should have been ” instead of ”. Aaaargh.
Hi everyone,
any idea why this above used CSS technique for making a picture gallery looks good on Firefox, but totally wrong on IE8 ?
check test webpage here :
http://www.comptoirdesarts.be/fotosKADER.html
there is no mention in the article about this not being rendered correctly in IE.
many thanks in advance !!
Axel
to moderator . hi, no need to publish my previous post, found out the error, however , the translation in the Dutch version did not mention some little details from the original English text, causing me a lot of researching…