<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.