Loading

Image pre-loader with offset load

Gallery thumbnail images pre-load and appear in offset manner, and have a border on hover. Performed with Javascript/JQuery.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Image pre-loader with offset load</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="gallerybox">
  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/001.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/002.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/003.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/004.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/005.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/006.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/007.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/008.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/009.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/010.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/011.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/012.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/013.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/014.jpg"></a>
  </div>

  <div id="thumb">
    <a href="" >
    <div id="galoverlay"></div>
    <img src="http://andrewjtullio.com/codepen/015.jpg"></a>
  </div>
</div>
  
    <script src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.gallerybox img {
  float: left;
}

.gallerybox {
  height: 650px;
  width: 1066px;
  margin: 0 auto;
}

#thumb {
  display:none;
  position: relative;
  float: left;
  height: 213px;
  width: 213px;
}

div#thumb:hover {
  box-shadow: 0px 6px 13px rgba(0,0,0,0.7);
  z-index: 20;
}

div#galoverlay {
  display: block;
  position: absolute;
  width: 213px;
  height: 213px;
  position: absolute;
}

div#galoverlay:hover {
  background-image: url(http://andrewjtullio.com/codepen/gallery-border.png);
  opacity: 1;
}
/* Downloaded from https://ahoj.co.uk/ */
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(['http://andrewjtullio.com/codepen/001.jpg','http://andrewjtullio.com/codepen/002.jpg','http://andrewjtullio.com/codepen/003.jpg','http://andrewjtullio.com/codepen/004.jpg','http://andrewjtullio.com/codepen/005.jpg','http://andrewjtullio.com/codepen/006.jpg','http://andrewjtullio.com/codepen/007.jpg','http://andrewjtullio.com/codepen/008.jpg','http://andrewjtullio.com/codepen/009.jpg','http://andrewjtullio.com/codepen/010.jpg','http://andrewjtullio.com/codepen/011.jpg','http://andrewjtullio.com/codepen/012.jpg','http://andrewjtullio.com/codepen/013.jpg','http://andrewjtullio.com/codepen/014.jpg','http://andrewjtullio.com/codepen/015.jpg']).preload();

			    $("#thumb:nth-child(1)").delay( 1000 ).fadeIn();
			    $( "#thumb:nth-child(2)" ).delay( 1100 ).fadeIn();
			    $( "#thumb:nth-child(3)" ).delay( 1200 ).fadeIn();
			    $( "#thumb:nth-child(4)" ).delay( 1300 ).fadeIn();
			    $( "#thumb:nth-child(5)" ).delay( 1400 ).fadeIn();
			    $( "#thumb:nth-child(6)" ).delay( 1500 ).fadeIn();
			    $( "#thumb:nth-child(7)" ).delay( 1600 ).fadeIn();
			    $( "#thumb:nth-child(8)" ).delay( 1700 ).fadeIn();
			    $( "#thumb:nth-child(9)" ).delay( 1800 ).fadeIn();
			    $( "#thumb:nth-child(10)" ).delay( 1900 ).fadeIn();
			    $( "#thumb:nth-child(11)" ).delay( 2000 ).fadeIn();
			    $( "#thumb:nth-child(12)" ).delay( 2100 ).fadeIn();
			    $( "#thumb:nth-child(13)" ).delay( 2200 ).fadeIn();
			    $( "#thumb:nth-child(14)" ).delay( 2300 ).fadeIn();
			    $( "#thumb:nth-child(15)" ).delay( 2400 ).fadeIn();

This awesome code is write by Drew, you can se more from this user in the personal repository