Simple CSS Gallery Tutorial

To run this code you'll need:

NotePad Editor
Browser (Internet Explorer / Firefox / Opera / Safari / Chrome)

This is a very simple CSS code you can use to make a gallery out of your images.
This Gallery Effect is only for a single line stack. But don't worry another line of stack can be added to accommodate more images.
Just move you mouse over the images to see the popup effects.
So the basic idea is to put all your <img id=img> inside <div id=container> .
Now to apply the effects on the <img id=img> we will use id selector to specify style for <img id=img> element.
We will use id=img selector to identify the <img id=img> element.
(You are free to use any id name. In this tutorial I'm using img)

We will have to define two states for the <img id=img> inside the <style></style> tags.

First State The static one when you open the web-page and see only the Squares.
Second State When you hover your mouse over the Squares to popout your images.

This method is compatible with Firefox, Opera, Chrome, Safari and slightly not compatible with Internet Explorer.
To make this code run in IE we'll have to paste the DOCTYPE Declaration.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

Paste this code above the <html> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

<html>

</html>

Code for the <head> </head> tag.

To get this Popup Gallery Effect all you have to do is to paste this code inside the <head> </head> tag.


<style>
#container{width:100%;
height:250px;
}
#img{float:left;
width:21px;
height:21px;
background:#191919;
padding:12px;
border:2px solid #2D2D2D;
}
#img:hover{width:168px;
height:224px;
background:#000 url(images/border.png);
}

</style>

The Explanation

Line 3 #container{

This is an optional style for the
<div id=container> that encloses
<img id=img src=.......>
This <div id=container> will come in handy when a lot of images need to be displayed that doesn't fit in a single line stack. To display images in next line of stack just put the other images (that do not fit on the first line of stack.) in another <div id=container>.

<div id=container>
<img id=img src=image-folder/image1.jpg/>
<img id=img src=image-folder/image2.jpg/>
<img id=img src=image-folder/image3.jpg/>

</div>

<div id=container>
<img id=img src=image-folder/image4.jpg/>
<img id=img src=image-folder/image5.jpg/>
<img id=img src=image-folder/image6.jpg/>

</div>

Line 4 width: 12px; Line 5 height:250px;

Sets the width and height of <div id=container> .

Line 7 #img{

Refers to the <img> tag having id=img.
Look at the Image 1 below.
The Outermost Grey Colored Box is the Border Color for <img id=img> tag. It encloses the image.

Image 1

Line 8 float:left;

Tells the <img id=img> to float left and stack itself on the left side of its <div id=container> .
See Image 2 below, how <img id=img> stacks itself to left side of <div id=container> div.

Image 2

The Orange Colored Box is the <div id=container> div.
The Blue, Violet & Pink Colored Boxes are <img id=img> that stack themselves to the left side.

Line 9 width: 21px; Line 10 height: 21px;

Makes the <img id=img> width smaller in the static state when we open the web-page and to give it a square look.

Image 3

Line 11 background: #191919;

This is HEX Color Code to give it a DarkGrey Background color.

Line 12 padding:12px;

To provide space between the Grey Colored Border of <img id=img> and the image.
The Black Colored Area is the 12 pixel padding provided to <img id=img>.

Image 1

Line 13 border: 2px solid #2D2D2D ;

It creates a border line around the <img id=img> .
2px is the width of the line.
solid is the line-style.(you can use dotted, dashed, grooved, ridged, inset, outset.)
#2D2D2D Hex color code for grey color.

Important Line 15 #img:hover { (Don't use space in this line of code.)

This is the code that runs when you hover your mouse over the <img id=img>.

Line 16 width: 168px; Line 17 height: 224px;

Changes the width and height of <img id=img> when a mouse hover's over it. See Image 3.

Line 18 background:#000 url(images/border.png);

This is a hack, we're using an image as border.
What we are doing is using an background border image for the <img id=img> tag. The background border image is visible because we have applied padding to the <img id=img> tag (see line 12). The image below is the border image that I've used. It is a transparent image.
Now for the code. It is divided into Two Parts
First Part is the Hex Color Code for black to give a background color to the <img id=img> tag.
Second Partis the url of the image to be used as the border.
Look at the images below. First one is the original image. It is transparent image. You can change the background color just by changing the Hex Color Code. The other two images have their Hex Color Codes as #000000 and #663300.

Image 4

Code for the <body></body> tag.

Now all you have to do is to put all your <img id=img src="..."/> tag inside
<div id=container> </div> tags having " id =container.

1
2
3

<div id=container>
   <img id=img src=image-path/image-name.jpg>
</div>

You must use a limited amount of image that your screen width allows you for a single line of stack.

This is how your Final Code should look like.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

<html>
<head>

<style>

#container{
width:100%;
height:250px;
}
#img{
float:left;
width:21px;
height:21px;
background:#191919;
padding:12px;
border:2px solid #2D2D2D;
}
#img:hover{
width:168px;
height:224px;
background:#000 url(images/border.png);
}

</style>

</head>
<body>
<div id=container>
<img id=img src=image-folder/image1.jpg/>
<img id=img src=image-folder/image2.jpg/>
<img id=img src=image-folder/image3.jpg/>
<img id=img src=image-folder/image4.jpg/>
<img id=img src=image-folder/image5.jpg/>

</div>

</body>
</html>

This code is ready to run on your browser. Save it and open it with your browser.

Use limited numbers of images to fit your screen width so that the images stay on a single line even when they pop. If you have more images then put a <br/> to move to the next line and then copy and paste the container div again...
Dont forget to define attributes for the container as
width:100%; float:left;