WHAT'S NEW?
Loading...

Image Galery using HTML and CSS Code (No JavaScript)

Image gallery can be create using HTML and CSS. The following image gallery is created with CSS and simple HTML Code.


HTML and CSS codes are given below:

CSS


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.main{
    margin: 20px;
    padding: 50px;
  }
div.gallery {
  margin: 10px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  box-shadow: 4px 3px; 
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

HTML

Save All the pictures in images folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE>
<html> 
<body>
<div class="main"> 
<div class="gallery">
  <a target="_blank" href="images/image_1.jpg">
    <img src="images/image_1.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="images/image_2.jpg">
    <img src="images/image_2.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="images/image_3.jpg">
    <img src="images/image_4.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="images/image_4.jpg">
    <img src="images/image_5.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>


Check Out the following too


0 comments:

Post a Comment