WHAT'S NEW?
Loading...

Simple Image Gallery in HTML and CSS Only (No javaScript)

October 26, 2019 , , , , ,
Here is the most attractive and simple image gallery in HTML and CSS with onmouseover event. It is very easy to design. Cods are very simple. You can use it in your website or blogs. It looks like as below and HTML/CSS codes are given.
Photo Gallery

Photo Gallery with HTML and JavaScript


CSS 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
 background: #f9a3b2;
}

a:hover {
 color: yellow;
}

.thumbnails img{
 height: 80px;
 border: 4px groove #a5d;
 margin: 0 10px 10px 0;
}

.thumbnails img:hover {
 border: 4px solid #00ccff;
 cursor: pointer;
}

.preview img {
 border: 4px solid #abffbb;
 width: 800px;
}

HTML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html> 
<head> 
   <title> Image Gallery </title> 
</head>
<body>

<div class="gallery" align="center">
 <h2>Photo Gallery with HTML and JavaScript</h2>
 <div class="thumbnails">
  <img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
  <img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
  <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
  <img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
  <img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
 </div><br/>

 <div class="preview" align="center">
  <img name="preview" src="images/img1.jpg" alt=""/>
 </div>

</div>
</body>
</html>

Try this Image Gallery 

Image Gallery

 



0 comments:

Post a Comment

Follow:

Shared by Way Templates