Skip to content

Instantly share code, notes, and snippets.

@abitgone

abitgone/jsbin.OvIb.css

Created August 20, 2013 17:02
Show Gist options
  • Save abitgone/6284209 to your computer and use it in GitHub Desktop.
Save abitgone/6284209 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.OvIb.css
html, body {
margin: 0px;
}
p {
margin: 0.5em 2em;
}
.photo-gallery {
width: 100%;
}
.photo-gallery__photo {
width: 66.6666%;
float: left;
position: relative;
padding-bottom: 33.3333%;
}
.photo-gallery__photo-image {
position: absolute;
width: 100%;
height: 100%;
}
.photo-gallery__thumbnails {
width: 33.3333%;
float: right;
position: relative;
padding-bottom: 33.3333%;
overflow: auto;
}
.photo-gallery__thumbnails-list {
margin: 0;
padding: 0;
display: block;
list-style: none;
position: absolute;
width: 100%;
height: 100%;
}
.photo-gallery__thumbnail {
width: 33.3333%;
display: block;
float: left;
position: relative;
height: 0;
padding-bottom: 33.333%;
}
.photo-gallery__thumbnail-image {
position: absolute;
width: 100%;
height: 100%;
}
.photo-gallery__photo-image,
.photo-gallery__thumbnail-image {
border: none;
background-size: cover;
background-position: center center;
}
.photo-gallery:before,
.photo-gallery:after {
content: "";
display: table;
}
.photo-gallery:after {
clear: both;
}
Raw
jsbin.OvIb.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>Photo Gallery</p>
<div class="photo-gallery">
<div class="photo-gallery__photo">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?1)" class="photo-gallery__photo-image" />
</div>
<div class="photo-gallery__thumbnails">
<ul class="photo-gallery__thumbnails-list">
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?1)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?2)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?3)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?4)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?5)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?6)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?7)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?8)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?9)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?10)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?11)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?12)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?13)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?14)" class="photo-gallery__thumbnail-image" />
</li>
<li class="photo-gallery__thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(http://lorempixel.com/600/600/?15)" class="photo-gallery__thumbnail-image" />
</li>
</ul>
</div>
</div>
<p>So, there you go.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment