WHAT'S NEW?
Loading...

Image Galery using HTML and CSS Code (No JavaScript)

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

Cinque Terre
Add a description of the image here
Forest
Add a description of the image here
Northern Lights
Add a description of the image here
Mountains
Add a description of the image here
Mountains
Add a description of the image here
Mountains
Add a description of the image here

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

Follow:

Shared by Way Templates