image gallery html template

Solutions on MaxInterview for image gallery html template by the best coders in the world

showing results for - "image gallery html template"

10 Feb 2019

1Example:
2
3<html>
4
5<head>
6
7<style>
8
9div.gallery {
10
11  margin: 5px;
12
13    border: 1px solid #ccc;
14
15    float: left;
16
17  width: 180px;
18
19}
20
21
22
23div.gallery:hover {
24
25  border: 1px solid #777;
26
27}
28
29
30
31div.gallery img {
32
33  width: 100%;
34
35  height: auto;
36
37}
38
39
40
41div.desc {
42
43    padding: 15px;
44
45    text-align: center;
46
47}
48
49</style>
50
51</head>
52
53<body>
54
55
56
57  <div class="gallery">
58  <a target="_blank" href="img_5terre.jpg">
59    
60  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
61  
62  </a>
63  <div class="desc">Add a description of the image here</div>
64
65  </div>
66
67<div class="gallery">
68  <a target="_blank" href="img_forest.jpg">
69    
70  <img src="img_forest.jpg" alt="Forest" width="600" height="400">
71  
72  </a>
73  <div class="desc">Add a description of the image here</div>
74
75  </div>
76
77<div class="gallery">
78  <a target="_blank" href="img_lights.jpg">
79    
80  <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
81  
82  </a>
83  <div class="desc">Add a description of the image here</div>
84
85  </div>
86
87<div class="gallery">
88  <a target="_blank" href="img_mountains.jpg">
89    
90  <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
91  
92  </a>
93  <div class="desc">Add a description of the image here</div>
94
95  </div>
96
97
98
99</body>
100
101</html>
102