CodePen

HTML

            
              <main>
    <h1>Responsive Photoset</h1>
  <p>The photoset is fluid: try resizing your browser. Dealing with margins and photos of different aspect ratios is also never a problem. <a href="https://medium.com/coding-design/7742e6f93d9e" title="Responsive Photosets">Read the tutorial on Medium</a>. Made by <a rel="author" href="http://terrymun.com" title="Visit me">Terry</a>.</p>
  <p>A more advanced version of this technique, which dictates the size of the thumbnails depending on screen sizes, is <a href="http://codepen.io/terrymun/full/mvHky">available here</a>.</p>
    <hr />
	<div class="photoset">
		<div class="photoset-row">
			<figure class="photoset-item">
				<a href="http://500px.com/photo/4772670"><img src="http://i.imgur.com/uh5YLj5.jpg" alt="ARoS Aarhus Kunstmuseum" title="ARoS Aarhus Kunstmuseum" /></a>
				<figcaption>ARoS Aarhus Kunstmuseum. Photo &copy; Terry Mun</figcaption>
			</figure>
		</div>
		<div class="photoset-row">
			<figure class="photoset-item">
				<a href="http://500px.com/photo/4820790"><img src="http://i.imgur.com/24hrPQn.jpg" alt="A lady walks briskly on a train platform in Bern, Switzerland." title="A lady walks briskly on a train platform in Bern, Switzerland." /></a>
				<figcaption>A lady walks briskly on a train platform in Bern, Switzerland. Photo &copy; Terry Mun</figcaption>
			</figure>
			<figure class="photoset-item">
				<a href="http://500px.com/photo/20245695"><img src="http://i.imgur.com/BXo4qAz.jpg" alt="Inside Rundetårn, Copenhagen." title="Inside Rundetårn, Copenhagen." /></a>
				<figcaption>Inside Rundetårn, Copenhagen. Photo &copy; Terry Mun</figcaption>
			</figure>
		</div>
		<div class="photoset-row">
			<figure class="photoset-item">
				<a href="http://500px.com/photo/39822810"><img src="http://i.imgur.com/Vo922iy.jpg" alt="By Twilight." title="By Twilight." /></a>
				<figcaption>By Twilight. Photo &copy; Terry Mun</figcaption>
			</figure>
			<figure class="photoset-item">
				<a href="http://500px.com/photo/35823988"><img src="http://i.imgur.com/80WaVuY.jpg" alt="God fest på Mejlgade." title="God fest på Mejlgade." /></a>
				<figcaption>God fest på Mejlgade. Photo &copy; Terry Mun</figcaption>
			</figure>
			<figure class="photoset-item">
				<a href="http://500px.com/photo/13998781"><img src="http://i.imgur.com/uDPcnM3.jpg" alt="Sit Back" title="Sit Back" /></a>
				<figcaption>Sit Back. Photo &copy; Terry Mun</figcaption>
			</figure>
		</div>
    <div class="photoset-row">
      <figure class="photoset-item">
        <a href="http://500px.com/photo/5889975"><img src="http://i.imgur.com/esWWGbF.jpg" alt="Basilique du Sacré-Cœur." title="Basilique du Sacré-Cœur." /></a>
        <figcaption>Basilique du Sacré-Cœur. Photo &copy; Terry Mun</figcaption>
      </figure>
      <figure class="photoset-item">
        <a href="http://500px.com/photo/4772520"><img src="http://i.imgur.com/ZCogT10.jpg" alt="Cyclist in Berlin" title="Cyclist in Berlin" /></a>
        <figcaption>Cyclist in Berlin. Photo &copy; Terry Mun</figcaption>
      </figure>
    </div>
    <div class="photoset-row">
      <figure class="photoset-item">
        <a href="http://500px.com/photo/5489150"><img src="http://i.imgur.com/UvGHJjo.jpg" alt="At the annual sailing race in Aarhus University." title="At the annual sailing race in Aarhus University." /></a>
        <figcaption>At the annual sailing race in Aarhus University. Photo &copy; Terry Mun</figcaption>
      </figure>
      <figure class="photoset-item">
        <a href="http://500px.com/photo/5889990"><img src="http://i.imgur.com/rWuQotb.jpg" alt="Dark corridors." title="Dark corridors." /></a>
        <figcaption>Dark corridors. Photo &copy; Terry Mun</figcaption>
      </figure>
    </div>
	</div>
</main>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
}
body {
  color: #333;
  line-height: 1.5em;
  margin-bottom: 1.5em;
}
main {
	margin: 0 auto;
  padding: 1.5rem 0;
	width: 80%;
}
h1 {
  font-weight: bold;
  font-size: 2em;
  line-height: 1.5em;
  text-align: center;
}
p {
  margin-bottom: 1.5rem;
}
hr {
  border: none;
  border-top: .125rem solid #ddd;
  margin-bottom: 1.375rem;
}
a {
  border-bottom: 2px solid #333;
  color: #333;
  text-decoration: none;
  transition: all .125s ease-in-out;
}
a:hover{
  border-bottom-color: #4a7298;
  color: #4a7298;
}

/* General photoset style */
 .photoset {
	overflow: hidden;
	width: 100%;
}
.photoset .photoset-row {
	margin-bottom: .5rem;
	overflow: hidden;
  width: 150%;
}
	.photoset .photoset-row:last-child { margin: 0; }
.photoset .photoset-item {
	display: block;
	float: left;
	margin: 0 .25rem;
}
	.photoset .photoset-item:first-child { margin-left: 0; }
	.photoset .photoset-item:last-child  { margin-right: 0; }
.photoset figure {
	margin: 0;
	overflow: hidden;
	position: relative;
  -webkit-backface-visibility: hidden; /* To fix webkit 1px rendering bug */
}
.photoset figcaption {
	background-color: rgba(255, 255, 255, .75);
	box-sizing: border-box;
  font-size: .75rem;
	padding: .5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	transition: all .5s ease-in-out;
}
.photoset-item a {
  border: 0;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.photoset .photoset-item:hover a + figcaption {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.photoset img {
	display: block;
  max-width: 100%;
	transition: all .25s ease-in-out;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');

/* Wait for DOM to be ready */
$(function() {
  
	// Detect resize event
	$(window).smartresize(function () {
		// Set photoset image size
		$('.photoset-row').each(function () {
			var $pi    = $(this).find('.photoset-item'),
				  cWidth = $(this).parent('.photoset').width();

			// Generate array containing all image aspect ratios
			var ratios = $pi.map(function () {
				return $(this).find('img').data('org-width') / $(this).find('img').data('org-height');
			}).get();

			// Get sum of widths
			var sumRatios = 0, sumMargins = 0,
          minRatio  = Math.min.apply(Math, ratios);
			for (var i = 0; i < $pi.length; i++) {
				sumRatios += ratios[i]/minRatio;
			};
      
      $pi.each(function (){
        sumMargins += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
      });

			// Calculate dimensions
			$pi.each(function (i) {
				var minWidth = (cWidth - sumMargins)/sumRatios;
				$(this).find('img')
          .height(Math.floor(minWidth/minRatio))
					.width(Math.floor(minWidth/minRatio) * ratios[i]);
			});
		});
	});
});

/* Wait for images to be loaded */
$(window).load(function () {

	// Store original image dimensions
	$('.photoset-item img').each(function () {
      $(this)
        .data('org-width', $(this)[0].naturalWidth)
        .data('org-height', $(this)[0].naturalHeight);
	});

  $(window).resize();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................