Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Develop Image Gallery using CSS

This article will cover the different ways to create image gallery using CSS. We will demonstrate the functionality by giving some CSS examples.

Introduction:

This tutorial will deal with image gallery using CSS. At the end of this tutorial you will be able to create different styling image galleries and perform different operation using CSS. No other script is needed to handle out the image gallery concept, only CSS is well sufficient to work with this.

Creating image gallery follow the terminology of basic standard HTML rule, Terminology is to put each image source and subsequent text description into an <li> and then manage the text inside just as you would any other HTML structure.

There is one many ways to do this, define a <div> class with attributes such as border, margin, color etc, and use <div> class to put image next to each other by using one by one. Following program will clear this idea.

Listing 1: Simple Image Gallery using CSS
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.gallery  {
        display: inline;
        list-style: none;
        width: px;
        min-height: 175px;
        float: left;
        margin: 0 12px 12px 0;
        text-align: center;
	}
</style>

</head>
<body>
<div class="gallery">
 <a target="_blank" href="http://facebook.com"><img src="facebooklogo.jpg" alt="facebook" width="110" height="90" /></a>
 </div>
<div class="gallery">
 <a target="_blank" href="http://linkedin.com"><img src="linkdlnlogo.jpeg" alt="linkdln" width="110" height="90" /></a>
 </div>
<div class="gallery">
 <a target="_blank" href="http://orkut.com"><img src="orkutlogo.jpg" alt="orkut" width="110" height="90" /></a>
 </div> 
<div class="gallery">
 <a target="_blank" href="http://myspace.com"><img src="myspacelogo.jpg" alt="myspace" width="110" height="90" /></a>
 </body>
</html>
 
Above figure is image gallery of 4 images, which is next to each other in landscape manner

Figure 1: Above figure is image gallery of 4 images, which is next to each other in landscape manner.

Above example have created simple image gallery using <div> elements in which element are getting place next to each other. Further working on this topic will elaborate how to add different styles and description for individual images. Following listed script will elaborate how to add different text description.

To adding text description we have added a new style class .description and in body section we will define text description for each image using 'description' class.

Listing 2: Adding text description in image gallery

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.gallery  {
        display: inline;
        list-style: none;
        width: px;
        min-height: 175px;
        float: left;
        margin: 0 12px 12px 0;
        text-align: center;	}
.description
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>
<body>
<h3> This is image gallery with text description of each images</h3>
<div class="gallery">
 <a target="_blank" href="http://facebook.com"><img src="facebooklogo.jpg" alt="facebook" width="110" height="90" /></a>
 <div class="description">facebook logo </div>
 </div>
<div class="gallery">
 <a target="_blank" href="http://linkedin.com"><img src="linkdlnlogo.jpeg" alt="linkdln" width="110" height="90" /></a>
 <div class="description">Linkdln logo</div>
 </div>
<div class="gallery">
 <a target="_blank" href="http://orkut.com"><img src="orkutlogo.jpg" alt="orkut" width="110" height="90" /></a>
 <div class="description">orkut logo</div>
 </div>
<div class="gallery">
 <a target="_blank" href="http://myspace.com"><img src="myspacelogo.jpg" alt="myspace" width="110" height="90" /></a>
 <div class="description">myspace logo</div>
 </body>
</html> 
This figure is output of simple script of image gallery in which each image holds the description of each

Figure 2: This figure is output of simple script of image gallery in which each image holds the description of each.

We have added text description for each image in image gallery. Now we will learn about adding backgrounds, color and positioning image gallery. Initially we have discussed that creating image gallery follow the terminology of basic standard HTML rule, Terminology is to put each image source and subsequent text description into an <li> and then manage the text inside just as you would any other HTML structure. This section will compile this theory.

Listing 3: Adding backgrounds, color and position to image gallery.


<!DOCTYPE html>
<head>
<title>image gallery</title>
<style type="text/css" media="screen">
#gallery {
padding: 5em 0;
margin: 0 auto;
width: 650px;
font: small Verdana, sans-serif;
}

#gallery h2 {
margin: 0;
border-bottom: 5px solid #999;
}

#gallery #main {
width: 100%;
margin: 0;
padding: 3em 0;
list-style: none;
}

#gallery #main li p {
margin: 0;
}


/* The title */

#gallery h2 {
width: 100%;
height: 40px;
background: transparent url("1.png") no-repeat 0 0;
text-indent: -1000em;
}
/* Positioning and initial formatting */

#gallery #main {
padding-left: 20px;
}
#gallery #main li {
float: left;
width: 160px;
margin: 0 40px 0 0;
}
#gallery #main li img {
display: block;
width: 100%;
}


/* Backgrounds and colors */

#gallery #main li {
background: #def url("12.png") no-repeat top left;
color: #000000;
margin-bottom: 0.5em;
}
#gallery #main li p {
padding: 0.5em 1em;
}
#gallery #main li p.desc {
background: transparent url("12.png") no-repeat bottom right;
font-style: italic;
}
</style>
</head>
<body>
<div id="gallery">
<h2>image gallery example with background and colors</h2>
<ul id="main"><li><p><img src="logo1.png" alt="food chain1" /></p>  <p class="desc">Vango Food chain</p>
 </li>  <li><p><img src="man.png" alt="food chain 2" /></p> <p class="desc">macdownald food chain</p>
 </li><li><p><img src="logo3.jpg" alt="food chain 3" /></p> <p class="desc">pizza hut food chain</p>
 </li> <li><p><img src="logo4.jpg" alt="food chain 4" /></p> <p class="desc"> Dominos food chain</p>
</li> <li><p><img src="logo5.gif" alt="food chain  5" /></p>  <p class="desc">Dominos Pizza</p>
</li>
	  
<li><p><img src="logo6.jpg" alt="food chain6" /></p>	  <p class="desc">Kfc food chain</p>
</li></ul>
</div>
</body>
</html>
Above figure is output of image gallery script which add background and color

Figure 3: Above figure is output of image gallery script which add background and color.

CSS image gallery is used to produce interactive designing for web pages. It helps you to explain the various things via using image plus text description in combined way.

Conclusion:

This tutorial covered the different ways to create a image gallery. Hope it will help you to understand the topic. If you have any queries please comment.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login