How to Create Responsive Image Gallery with HTML & CSS Code Template
Have you heard of the programming language, HTML (HyperText Markup Language) and CSS (Cascading Style Sheets)? If you have, then it is good, and if you have not, then you will become aware of these two languages through this post and other articles about programming languages on this blog.
You will learn how to make stylish, standout and responsive image gallery with simple HTML and CSS photo gallery codes. We’ve made it easy with free template you can follow line after line.
Before going further and digging dip, you’re advised to open notepad, and save the file with name index.html in a folder (name the folder, gallery). You should make another folder with the name, images in gallery folder. You should put three images of the same size, for example 400*400 size images in images folder.
Write the following codes in index.html file:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″/>
<title>Gallery</title>
<link rel=”stylesheet” href=”style.css”/>
<body>
</body>
</html>
In the body (between <body> and</body>) of your HTML, you should write the following codes:
<h1>Gallery</h1>
<div id=”gallery”>
<ul>
<li>
<img src=”hxxps://drsamrobbins.com/wp-content/uploads/2014/03/apples-burn-fat-400×400.jpg” class=”pic”/>
<label>Caption Here</label>
</li>
<li>
<img src=”hxxps://noao.edu/image_gallery/images/d2/m51-400.jpg” class=”pic”/>
<label>Caption Here</label>
</li>
<li>
<img src=”hxxps://i.pinimg.com/736x/9e/4a/1e/9e4a1e2ce8fdd5e8f2eafba6f7c34bf0–glitter-wallpaper-black-wallpaper.jpg” class=”pic”/>
<label>Caption Here</label>
</li>
</ul>
</div>
<!—that’s how comments are made in HTML (start comment)(
Note: <div> is an HTML tag that divides HTML body into portions, and h1 is a heading tag, <ul> is a tag for unordered list, <li> is a tag for list, and class is a child of id in HTML. I have used links to generate pictures in HTML body rather than using the pictures in the folder.
Note 2: Change the hxxp in bold to http
<!—that’s how comments are made in HTML (end comment)(
Now you should open a blank notepad document, and you should name it style.css. Put style.css file in the same folder where your index.html file is. In the style.css file, write following codes (note that comments in stylesheet files are given by typing // next to semicolon):
h1
{
text-shadow:gray 3px 3px 3px;//will give text a gray shade
box-shadow:gray 3px 3px 3px 3px;//will give box a gray shade
}
#gallery ul li
{
border:5px solid black;// will create a border of 5 px with black colour
float:left;//will move the images to the left
width:27%;//images will be created with 27% width
margin:1%; //will place images at a distance of 1% from one another
position:relative;//image will be positioned
list-style:none;//will hide the bullet points
}
#gallery ul li .pic
{
width:100%;// image will be made with 100% width
height:200px;//image will be 200px in height
-webkit-transition:-webkit-transform 3s linear;// it’s a CSS3 property for transformation
}
#gallery ul li .pic:hover
{
-webkit-transform:rotate(360deg);//will rotate the image to 360 degree; you can also use 180deg instead of 360deg
}
#gallery ul li label
{
background-color:black;//will color the background of label, black
color:white;//will color the text of label, white
bottom:0%;//will fix the label at bottom
opacity:0.5;//will make the background color 50% lighter
position:absolute;//it is often used with relative property
height:30px;//height of the label will become 30px
width:100%;//will make the width of label, 100%
text-align:center;//will align the text in center
-webkit-transition:height 2s linear;//will call –webkit-transition property
}
#gallery ul li label:hover
{
height:80px;//caption will rise to 80px, because of hover command
}
You can use above codes to try out making a standout gallery yourself. Remember –webkit-transition property is not supported in Internet Explorer, you should use the Google Chrome or Opera browser to test above codes.
You should remember that ids are called by # in stylesheet, and classes are called by dot (.) in stylesheet
Interactive and responsive gallery looks more pretty, hence you should also try to make standout galleries.
This is the same way how Google shows images on browser. HTML and CSS languages are not very difficult to learn, and you need to give time to study these languages as they need practice.
The more you practice HTML and CSS, the more command you will have over HTML and CSS. HTML and CSS are interesting languages, hence you will not face problem learning it.
Following are some of the things about HTML and CSS that you must know about:
- HTML tags are both open and closed. For example, <p> is an open paragraph tag and </p> is a close paragraph tag.
- <h2>, <h3>, <h4>, <h5>, and <h6> are heading tags in HTML, whereas <h6> has the lowest size, and <h2> has bigger size than h3,h4, and h5 respectively
- <br>This tag breaks the line in HTML
In order to create a circle through HTML & CSS, programmer must define an item either through id or class in HTML, for example <div id=”box”></div>, then the programmer must define same height and width in style sheet with background-color and border-radius as shown below:
#box
{
width:200px;
height:200px;
background-color:blue;//will color the background, blue
border-radius:100%;//will make square a circle
}
font-style, font-weight, cursor, padding, margin, and * are some of the commands that are often used in CSS
How much knowledge have you gained about HTML and CSS through this post? Now, you can make a gallery just like Google images gallery. You are also aware of various html tags and stylesheet code now.
You should carefully go through this post again, and you must also open notepad to practice creating standout gallery through HTML and CSS.
