IMage Slice Gallery

HTML

<div id="container">
    <div id="sliceContainer">
    </div>
</div>

CSS

body {background:url(http://ghaslate.com/laboratoriodelgelato/wp-content/uploads/2017/09/logo01.png)}

div#container{
    width:960px !important; height:960px;background:#2A2A2A;
    margin: 20px auto; padding:25px 0px 0px 20px;
}

#sliceContainer {height:900px;margin: 0 auto;}

.sliceSpecs {
    background:url(http://www.hickmet.com/media/images/960x960/892/Galle_Rose.jpg);width:145px; height:145px;float:left; margin:5px}

JavaScript

$(document).ready(function() {
    for (i = 1; i <= 36; i++) {
  $("#sliceContainer").
      append($(document.createElement('div')).addClass("sliceSpecs")
       .css('background-position',(((i - 1) % 6) * -145) + "px " +
         (parseInt((i - 1) / 6) * -145) + "px").fadeTo(0, 0)
       .delay(((i-1)%6 + 1 + Math.floor((i-1)/6))*100).fadeTo(500, 1));
    }});