Making A Image Gallery By Html And Css

image gallery:

It is very possible for anyone to make a simple image gallery by html and css. Before making any thing you need to make a plan with it. When you want to make a image gallery you need to make proper plan. Without plan you can not make it. Suppose somebody want that if anybody click on image it will open in a new tab of browser but somebody may be want if visitor click on image it will open on a slide or if anybody move their mouse into any image it may be larger by hover property of css.

Simple Description about image gallery:

A image gallery contain a short description about image. In gallery anyone can see small image but when anyone click on this it may be open in a new tab. This is the short description of image gallery.

How can I make a image gallery:

At first I need to make the right selection of position of image. Than I can make border for image . I can also use div tag for more attractive and colorful.

Lets make a simple image gallery:

You can see following the syntax for making image gallery :

<html>
<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}    
div.img img
{
  display: inline;
  margin: 1px;
  border: 2px solid red;
}
div.img a:hover img {border: 2px solid #0000ff;
 }
div.dec
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>
<div>
 <a target="_blank" href="http://h2cweb.net/demo/gallery/yoga1.jpg"><img src="http://h2cweb.net/demo/gallery/yoga1.jpg" alt="h2cweb.net" width="110" height="90" /></a>
 <div>Add something about this image. </div>
</div>
<div>
 <a target="_blank" href="http://h2cweb.net/demo/gallery/yoga2.jpg"><img src="http://h2cweb.net/demo/gallery/yoga2.jpg" alt="h2cweb.net" width="110" height="90" /></a>
 <div>Add something about this image.</div>
</div>
<div>
 <a target="_blank" href="http://h2cweb.net/demo/gallery/yoga3.jpg"><img src="http://h2cweb.net/demo/gallery/yoga3.jpg" alt="h2cweb.net" width="110" height="90" /></a>
 <div>Add something about this image.</div>
</div>
<div>
 <a target="_blank" href="http://h2cweb.net/demo/gallery/yoga4.jpg"><img src="http://h2cweb.net/demo/gallery/yoga4.jpg" alt="h2cweb.net" width="110" height="90" /></a>
 <div>Add something about this image.</div>
</div>
<div>
 <a target="_blank" href="http://h2cweb.net/demo/gallery/yoga5.jpg"><img src="http://h2cweb.net/demo/gallery/yoga5.jpg" alt="h2cweb.net" width="110" height="90" /></a>
 <div>Add something about this image.</div>
</div>
</body>
</html>

image gallery by html and css

Description of syntax:

Every image has its own description. The description is a tag and the image is a tag. I have used <div> here. All images div class name is “img” and all description class name is “dec”. Look at the following syntax:

div.img

{

margin: 2px;

border: 1px solid #0000ff;

height: auto;

width: auto;

float: left;

text-align: center;

}

 

Margin indicate the border of whole image with description. Border property used for select the type of border and color of border. Float property make the image positon top and from the left.

Now look at this following syntax:

div.img img

{

display: inline;

margin: 1px;

border: 2px solid red;

}

 

This syntax just select image not description. You can make only the image border from this. You can design as you want.

div.img a:hover img {border: 2px solid #0000ff;

}

 

This is a hover property of css. You know about hover. It will work when anybody move their mouse into any image. Then it will make output for this.

div.dec

{

text-align: center;

font-weight: normal;

width: 120px;

margin: 2px;

}

This will just work for image description.  It also need to be re-size to image. If not , it may be become larger than image.

This is the fulfill learning about a simple and easy html and css image gallery.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.