<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="fds">
  <img src="tuwanek-sunshine-coast-bc.jpg" srcset="tuwanek-sunshine-coast-bc-2x.jpg 2x" alt="Tuwanek Sunshine Coast, British Columbia">
  <img src="hornby-island-shoreline.jpg" srcset="hornby-island-shoreline-2x.jpg 2x" alt="Hornby Island shoreline, British Columbia">
  <img src="mt-baker-washington.jpg" 
  srcset="mt-baker-washington-2x.jpg 2x" alt="Mt Baker, Washington">
  <img src="nelson-bridge.jpg" srcset="nelson-bridge-2x.jpg 2x" alt="Nelson Bridge, Vancouver">
  <img src="golden-skies-victoria.jpg" srcset="golden-skies-victoria-2x.jpg 2x" alt="Golden skies, Victoria">
  <img src="first-beach-vancouver.jpg" srcset="first-beach-vancouver-2x.jpg 2x" alt="First beach, Vancouver">
</div>
body { 
  margin: 0;
  background: #222;
}
#fds {
	font-size: 0;
  max-width: 750px;
  margin: 0 auto;
}
#fds img {
	width: 33.33%; 
	opacity: 0;
}
$(function() {
	$('#fds img').each(function(i) {
	$(this).delay((i++) * 500).fadeTo(1000, 1); })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js