PhotoGallery

In this example below you will see how to do a PhotoGallery with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -_-Nina-_-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -_-Nina-_- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>PhotoGallery</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
<title>Photo Gallery</title>
</head>
<body>
  
<div id=”container”>
  
<h1>Anime Photo Gallery</h1>
  
<h2><a href="https://en.wikipedia.org/wiki/Anime">Source for more information!</a></h2>

</div>
  
  
  <br>
  <ul class="gallery">
	<li><a href="" class="pic-1"><img src="https://photos-1.dropbox.com/t/2/AABAD9WyrN85rifyYFiHF5H3DXOJ_whLPf-grufralTKwQ/12/699187057/jpeg/32x32/1/_/1/2/CRUNCHYROLLLLLLL.jpg/EIS_nuEFGBcgBygH/GWvLTtmrS6siM7tTw6jNmSojCII6QfOCXFEVdeoh3TY?size=2048x1536&size_mode=3"/></a></li>
    
		<li><a href="https://vampiregodesnyx.deviantart.com/art/Anime-Zodiac-Compatibility-Chart-Kuroko-no-Basuke1-588335537" class="pic-2"><img src="https://orig00.deviantart.net/4924/f/2016/033/f/1/anime_zodiac_compatibility_chart_kuroko_no_basuke1_by_vampiregodesnyx-d9qa2lt.jpg"/></a></li>
    
    <br><br><br><br><br><br><br><br><br><br><br><br>
    
		<li><a href="https://www.flickr.com/photos/bagogames/12841889043" class="pic-3"><img src="https://c2.staticflickr.com/4/3675/12841889043_b7291a307d_b.jpg"/></a></li>
    
		<li><a href="https://www.flickr.com/photos/bakaotaku/5781865003/" class="pic-4"><img src="https://c1.staticflickr.com/4/3283/5781865003_e7142090dc_z.jpg"/></a></li>
    
    <br><br><br><br><br><br><br><br><br><br><br><br>
    
		<li><a href="https://www.flickr.com/photos/bagogames/15755012174" class="pic-5"><img src="https://c1.staticflickr.com/9/8622/15755012174_f28dc41699_b.jpg"/></a></li>
    
		<li><a href="https://www.flickr.com/photos/damx/2114026064" class="pic-6"><img src="https://c1.staticflickr.com/3/2297/2114026064_bbdefb9b5f_z.jpg?zz=1"/></a></li>
    
</ul>
  
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-_-Nina-_-/photogallery-pWPYep */
body {
	background: #959796 url("https://photos-6.dropbox.com/t/2/AACLPi_YMIaAZk9HfQE-v2Vdsl0lDH6HhQsmXlMET8TRqA/12/699187057/jpeg/32x32/1/_/1/2/wood-repeat.jpg/EIS_nuEFGBcgBygH/Ie98lzNdqUt3JYS63ZdvHF7WM3Xkzn5lruG81ztoejE?size=2048x1536&size_mode=3");
  text-align: center;
}

#container {
	width: 600px; margin: 40px auto;
}

ul.gallery {
	list-style: none;
}

ul.gallery li a {
	position: relative;
	float: left;
	padding: 10px 10px 25px 10px;
	background: #eee;
	border: 1px solid #fff;
	-moz-box-shadow: 0px 2px 15px #333;
	position: relative;
}

ul.gallery li a.pic-1 {
  margin-left:650px;
		z-index: 1;
		-webkit-transform: rotate(-10deg);
 		-moz-transform: rotate(-10deg);
	}
	ul.gallery li a.pic-2 {
		z-index: 5;
		-webkit-transform: rotate(-3deg);
 		-moz-transform: rotate(-3deg);
	}
	ul.gallery li a.pic-3 {
    margin-left:650px;
		z-index: 3;
		-webkit-transform: rotate(4deg);
 		-moz-transform: rotate(4deg);
	}
	ul.gallery li a.pic-4 {
		z-index: 4;
		-webkit-transform: rotate(14deg);
 		-moz-transform: rotate(14deg);
	}
	ul.gallery li a.pic-5 {
    margin-left:650px;
		z-index: 2;
		-webkit-transform: rotate(-12deg);
 		-moz-transform: rotate(-12deg);
	}
	ul.gallery li a.pic-6 {
		z-index: 6;
		-webkit-transform: rotate(5deg);
 		-moz-transform: rotate(5deg);
	}
	
	ul.gallery li a:hover {
		z-index: 10;
		-moz-box-shadow: 3px 5px 15px #333;
	}

img {
  width:240px;
    height:160px;
}

h1{
  color:white;
  text-shadow:2.5px 2px #2C609E;
}

a:link {
	text-decoration: none;
	color: purple;
  text-shadow: 2px 2px #999CFF;
}

a:visited {
	text-decoration: none;
	color: #0008FF;
}

a:hover {
	text-decoration: underline;
	color: #CACAD6;
}

a:active {
	text-decoration: underline;
	color: green;
}

Comments