Image Gallery

HTML

							
							
<div id="gallery">
	<div class="preview-images">
		<ul>
			<li><input readonly id="image1" name="image-gallery"></li>
			<li><input readonly id="image2" name="image-gallery"></li>
			<li><input readonly id="image3" name="image-gallery"></li>
			<li><input readonly id="image4" name="image-gallery"></li>
			<li><input readonly id="image5" name="image-gallery"></li>
		</ul>
	</div>
	<div class="preview-thumbnails">
		<div class="thumbs-container">
			<ul>
				<li><label for="image1"><img alt="image1-thumbnail" src="/assets/images/image-gallery/image1-thumbnail.jpg"></label></li>
				<li><label for="image2"><img alt="image2-thumbnail" src="/assets/images/image-gallery/image2-thumbnail.jpg"></label></li>
				<li><label for="image3"><img alt="image3-thumbnail" src="/assets/images/image-gallery/image3-thumbnail.jpg"></label></li>
				<li><label for="image4"><img alt="image4-thumbnail" src="/assets/images/image-gallery/image4-thumbnail.jpg"></label></li>
				<li><label for="image5"><img alt="image5-thumbnail" src="/assets/images/image-gallery/image5-thumbnail.jpg"></label></li>
			</ul>
		</div>
	</div>
</div>

CSS

							
							
#gallery{
	border: 1px solid black;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-justify-content: space-between;
	        justify-content: space-between;
	-ms-flex-align: start;
	    -webkit-align-items: flex-start;
	        align-items: flex-start;
	padding: 1em;
	height: 366px;
}

#gallery .preview-images {
	overflow: hidden;
	max-width: 500px;
	max-height: 333px;
	-ms-flex: 0 1 80%;
	    -webkit-flex: 0 1 80%;
	        flex: 0 1 80%;
	height: 100%;
	width: 100%;
}

#gallery .preview-images ul {
	height: 100%;
}

#gallery .preview-images ul li{
	height: 100%;
	width: 100%;
}

#gallery .preview-images input {
	height: 100%;
    width: 100%;
    max-width: 100%;
    border: 0;
}

#gallery .preview-images input:focus {
	border: 0;
    outline: 0;
}

#gallery .preview-images input#image1 {
	background: url(/assets/images/image-gallery/image1.jpg) 0 0 no-repeat transparent;
	background-size: contain;
}
#gallery .preview-images input#image2 {
	background: url(/assets/images/image-gallery/image2.jpg) 0 0 no-repeat transparent;
	background-size: contain;
}
#gallery .preview-images input#image3 {
	background: url(/assets/images/image-gallery/image3.jpg) 0 0 no-repeat transparent;
	background-size: contain;
}
#gallery .preview-images input#image4 {
	background: url(/assets/images/image-gallery/image4.jpg) 0 0 no-repeat transparent;
	background-size: contain;
}
#gallery .preview-images input#image5 {
	background: url(/assets/images/image-gallery/image5.jpg) 0 0 no-repeat transparent;
	background-size: contain;
} 

#gallery ul {
	position: relative;
	margin: 0;
	padding: 0;
}

#gallery ul li {
	list-style: none;
}

#gallery .preview-thumbnails {
	margin-left: 1em;
}

#gallery .preview-thumbnails label {
	display: block;
	margin-bottom: 5px;
	cursor: pointer;
	border: 2px solid #FFFFFF;
}

#gallery .preview-thumbnails label:hover {
    border: 2px solid #a25f5e;
}

#gallery .preview-thumbnails label img{
	display: block;
}

#gallery .preview-thumbnails a {
	border: none;
	display: block;
}

#gallery .preview-thumbnails a:visited {
	border: 1px solid red;
}

/* Reponsive part */
@media screen and (max-width: 680px) {
	#gallery {
		-webkit-flex-direction: column-reverse;
		    -ms-flex-direction: column-reverse;
		        flex-direction: column-reverse;
		-webkit-align-items: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	#gallery .preview-thumbnails {
		margin-left: 0 !important;
		margin-bottom: 1em;
		width: 100%;
	}
	#gallery .preview-thumbnails .thumbs-container {
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}
	#gallery .preview-thumbnails ul {
		width: 388px;
		margin: 0 auto;
	}
	#gallery .preview-thumbnails ul li {
		display: inline-block;
	}
	#gallery .preview-images input#image1,
	#gallery .preview-images input#image2,
	#gallery .preview-images input#image3,
	#gallery .preview-images input#image4,
	#gallery .preview-images input#image5 {
		background-position: 50% 0 !important;
	}
}