Creating Image Gallery with HTML and CSS

Images gallery for web pages can be created with plain HTML, JavaScript, and CSS. Easiest one is with HTML but that's not good if we want to add new images. Image Gallery with HTML and CSS is quite easy and we can add new images to the gallery with ease. It looks beautiful too by using CSS. This program creates the thumbnails and displays the enlarged image when a mouse is moved over a thumbnail. Following are the steps to create the Image Gallery.

Part 1: Styling with Cascading Style Sheet.

This code can be written inside or in external css file. Step 1: Style for the document body.
  1. body {
  2.  
  3. background: #222; //changes background color of the body
  4.  
  5. margin-top: 20px; // top margin of the document expressed in pixel.
  6.  
  7. }
Step 2: Style for displaying Title.
  1. h3 { //title is displayed using <h3> tag
  2.  
  3. color: #eee; //color of the title
  4.  
  5. font-family: Verdana; //font family for the Title
  6.  
  7. }
Step 3: Style for displaying thumbnail. This style is used for creating the thumbnails i.e displaying images in small size. Margin property of CSS is used to specify the amount of space to be left between a border and the image or any content around it. It is specified with four values as top, right, left, bottom(top margin, right margin etc) or if the the margin should be equal on all the four sides then it can be specified with single value. Same rule is used for specifying padding which is nothing but space between border and the content around which the border is drawn.
  1. .thumbnails img { //thumbnails is the name of style class for <img> tag.
  2.  
  3. height: 80px;
  4.  
  5. border: 4px solid #555; //border around the thumbnail is 4 pixel wide and color used is the one with 555 color code.
  6.  
  7. padding: 1px; // amount of space left between the image edge and it's border
  8.  
  9. margin: 0 10px 10px 0; // amount of space left between a border and the image or any content around it.
  10.  
  11. }
Next is the CSS style when a mouse is moved over the thumbnail. The color is changed and cursor appearance is changed to pointer.
  1. .thumbnails img:hover {
  2. border: 4px solid #00ccff;
  3.  
  4. cursor:pointer;
  5.  
  6. }
Step 5: Style for the enlarged image For the enlarged image height is changed to 500 px and border is drawn around the image. This class name used here is preview.

Part 2: Adding and Displaying the Images:

One main division is created inside the document and other two divisions are created inside the main division for thumbnails and images. This division is aligned in the center of the web document.
  1. <html><div class="gallery" align="center"></html>
Step 1: Adding Title For displaying title <h3> tag is used, for which style is already created.
  1. <h3>Cute Babies</h3><br/></html>
Step 2: Creating and Displaying Thumbnails Division is created with
tag and onmouseover attribute to specify that images should be enlarged when mouse is moved over the thumbnail. Id is applied to each image thumbnail.
  1. <img onmouseover="preview.src=img1.src" id="img1" src="Babies/image001.jpg" alt="Image Not Loaded"/>
  2.  
  3. <img onmouseover="preview.src=img2.src" id="img2" src="Babies/image002.jpg" alt="Image Not Loaded"/>
When mouse is moved over the thumbnail, value of src attribute of the image(<img> tag) with "preview" id will be changed to that of src of the thumbnail(image) with specified id, i.e same image will be displayed. Step 3: Division for enlarged image: Division is created and style of preview class css style is applied. In the beginning first image is loaded.
  1. <div class="preview" align="center">
  2.  
  3. <img id="preview" src="Babies/image001.jpg" alt="No Image Loaded"/>
  4. </div>
Note: src attribute value format is for Linux OS, for windows OS should be used.

Comments

Submitted byPedro5151565251 (not verified)on Fri, 01/31/2014 - 12:35

I need more help. What if we have different img urls for every image we want to add to this gallery???
Submitted bycurios (not verified)on Mon, 04/14/2014 - 21:11

Wonderful keep it up :)
Submitted byValeriya (not verified)on Tue, 02/03/2015 - 12:25

Hi guys, I need your advice: how to create a gallery with an image title and description? It has to have a list of pictures on the top, and when mouse is moving around (onMouseOver)the pointed picture has to have a biggest size, a title, and description at the middle of the screen. The main part is done - pictures are changing, but stuck with title and description. :(

Add new comment