Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="photo-group" 
  data-num-img="https://picsum.photos/300,
    https://picsum.photos/400,
    https://picsum.photos/600,
    https://picsum.photos/800">
  <!--  enter the number here:  -->
  130
</div>
              
            
!

CSS

              
                // the number changes in HTML
$size: 100px;
$distance-inner: 5px;
$distance-outer: 110px;


@mixin corner1 {
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

@mixin corner2 {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

@mixin corner3 {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

@mixin corner4 {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

@mixin item {

    position: absolute;
    width: $size * 3;

    &__item {
        background-image: url(https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
        position: absolute;
        width: $size;
        height: $size;
        background-size: cover;
        transition: all .6s;

        @content;

        a {
            display: block;
            height: 100%;
        }
    }

}


body {
    box-sizing: border-box;

    .photo-group {
        margin: 5%;
        position: relative;

        @for $i from 1 to 11 {
            &>div:nth-child(#{$i}) {
                left: (($size * 3) + $distance-outer) * ($i - 1);
            }
        }

        // One
        &-1 {
            @include item {
                &:nth-child(1) {
                    left: $size + $distance-inner;
                    top: 0px;
                    @include corner1;
                }

                &:nth-child(2) {
                    left: ($size + $distance-inner) * 2;
                    top: 0px;
                }

                &:nth-child(3) {
                    left: ($size + $distance-inner) * 2;
                    top: $size+$distance-inner;
                }

                &:nth-child(4) {
                    left: ($size + $distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(5) {
                    left: ($size + $distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(6) {
                    left: ($size + $distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(7) {
                    left: ($size + $distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                }
            }
        }

        // Two
        &-2 {
            @include item {
                &:nth-child(1) {
                    left: 0px;
                    top: $size+$distance-inner;
                }

                &:nth-child(2) {
                    left: 0;
                    top: 0;
                    @include corner1;
                }

                &:nth-child(3) {
                    left: $size+$distance-inner;
                    top: 0;
                }

                &:nth-child(4) {
                    left: ($size + $distance-inner) * 2;
                    top: 0;
                    @include corner2;
                }

                &:nth-child(5) {
                    left: ($size + $distance-inner) * 2;
                    top: $size + $distance-inner;
                }

                &:nth-child(6) {
                    left: ($size + $distance-inner) * 2;
                    top: ($size + $distance-inner) * 2;
                    @include corner3;
                }

                &:nth-child(7) {
                    left: ($size + $distance-inner);
                    top: ($size + $distance-inner) * 2;
                    @include corner1;
                }

                &:nth-child(8) {
                    left: ($size + $distance-inner);
                    top: ($size + $distance-inner) * 3;
                    @include corner3;
                }

                &:nth-child(9) {
                    left: 0;
                    top: ($size + $distance-inner) * 3;
                    @include corner1;
                }

                &:nth-child(10) {
                    left: 0;
                    top: ($size + $distance-inner) * 4;
                }

                &:nth-child(11) {
                    left: 0;
                    top: ($size + $distance-inner) * 5;
                }

                &:nth-child(12) {
                    left: $size + $distance-inner;
                    top: ($size + $distance-inner) * 5;
                }

                &:nth-child(13) {
                    left: ($size + $distance-inner)*2;
                    top: ($size + $distance-inner) * 5;
                }

            }
        }

        // Three
        &-3 {
            @include item {
                &:nth-child(1) {
                    left: 0px;
                    top: $size+$distance-inner;
                }

                &:nth-child(2) {
                    left: 0;
                    top: 0px;
                    @include corner1;
                }

                &:nth-child(3) {
                    left: $size+$distance-inner;
                    top: 0px;
                }

                &:nth-child(4) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                    @include corner2;
                }

                &:nth-child(5) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner);
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                    @include corner3;
                }

                &:nth-child(7) {
                    left: $size+$distance-inner;
                    top: ($size+$distance-inner) * 2;
                    @include corner1;
                }

                &:nth-child(8) {
                    left: $size+$distance-inner;
                    top: ($size+$distance-inner) * 3;
                    @include corner4;
                }

                &:nth-child(9) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                    @include corner2;
                }

                &:nth-child(10) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(11) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                    @include corner3;
                }

                &:nth-child(12) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 5;
                }

                &:nth-child(13) {
                    left: 0px;
                    top: ($size+$distance-inner) * 5;
                    @include corner4;
                }

                &:nth-child(14) {
                    left: 0px;
                    top: ($size+$distance-inner) * 4;

                }
            }

        }

        // Four
        &-4 {
            @include item {

                &:nth-child(1) {
                    left: 0;
                    top: 0;
                }

                &:nth-child(2) {
                    left: 0;
                    top: ($size+$distance-inner);
                }

                &:nth-child(3) {
                    left: 0;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(4) {
                    left: ($size+$distance-inner);
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(5) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner);
                }

                &:nth-child(7) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(8) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(9) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(10) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                }

            }

        }

        // Five
        &-5 {
            @include item {

                &:nth-child(1) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                }

                &:nth-child(2) {
                    left: ($size+$distance-inner) * 1;
                    top: 0;
                }

                &:nth-child(3) {
                    left: 0;
                    top: 0;
                }

                &:nth-child(4) {
                    left: 0;
                    top: ($size+$distance-inner);
                }

                &:nth-child(5) {
                    left: 0;
                    top: ($size+$distance-inner)*2;
                }

                &:nth-child(6) {
                    left: $size+$distance-inner;
                    top: ($size+$distance-inner)*2;
                }

                &:nth-child(7) {
                    left: ($size+$distance-inner)*2;
                    top: ($size+$distance-inner)*2;
                    @include corner2;
                }

                &:nth-child(8) {
                    left: ($size+$distance-inner)*2;
                    top: ($size+$distance-inner)*3;
                }

                &:nth-child(9) {
                    left: ($size+$distance-inner)*2;
                    top: ($size+$distance-inner)*4;
                }

                &:nth-child(10) {
                    left: ($size+$distance-inner)*2;
                    top: ($size+$distance-inner)*5;
                    @include corner3;
                }

                &:nth-child(11) {
                    left: ($size+$distance-inner)*1;
                    top: ($size+$distance-inner)*5;
                }

                &:nth-child(12) {
                    left: 0;
                    top: ($size+$distance-inner)*5;
                    @include corner4;
                }

                &:nth-child(13) {
                    left: 0;
                    top: ($size+$distance-inner)*4;
                }

            }

        }

        // Six
        &-6 {
            @include item {

                &:nth-child(1) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                    @include corner3;
                }

                &:nth-child(2) {
                    left: ($size+$distance-inner) * 1;
                    top: 0;
                    @include corner1;
                }

                &:nth-child(3) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 1;
                    @include corner3;
                }

                &:nth-child(4) {
                    left: 0;
                    top: ($size+$distance-inner) * 1;
                    @include corner1;
                }

                &:nth-child(5) {
                    left: 0;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(7) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                    @include corner2;
                }

                &:nth-child(8) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(9) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(10) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                    @include corner3;
                }

                &:nth-child(11) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 5;
                }

                &:nth-child(12) {
                    left: 0;
                    top: ($size+$distance-inner) * 5;
                    @include corner4;
                }

                &:nth-child(13) {
                    left: 0;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(14) {
                    left: 0;
                    top: ($size+$distance-inner) * 3;
                }

            }
        }

        // Seven
        &-7 {
            @include item {

                &:nth-child(1) {
                    left: 0;
                    top: 0;
                }

                &:nth-child(2) {
                    left: ($size+$distance-inner);
                    top: 0;
                }

                &:nth-child(3) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                }

                &:nth-child(4) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 1;
                }

                &:nth-child(5) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(7) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(8) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                }


            }
        }

        // Eight
        &-8 {
            @include item {
                &:nth-child(1) {
                    left: 0px;
                    top: $size+$distance-inner;
                }

                &:nth-child(2) {
                    left: 0;
                    top: 0px;
                    @include corner1;
                }

                &:nth-child(3) {
                    left: $size+$distance-inner;
                    top: 0px;
                }

                &:nth-child(4) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                    @include corner2;
                }

                &:nth-child(5) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner);
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                    @include corner3;
                }

                &:nth-child(7) {
                    left: $size+$distance-inner;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(8) {
                    left: $size+$distance-inner;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(9) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                    @include corner2;
                }

                &:nth-child(10) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(11) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                    @include corner3;
                }

                &:nth-child(12) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 5;
                }

                &:nth-child(13) {
                    left: 0px;
                    top: ($size+$distance-inner) * 5;
                    @include corner4;
                }

                &:nth-child(14) {
                    left: 0px;
                    top: ($size+$distance-inner) * 4;

                }

                &:nth-child(15) {
                    left: 0px;
                    top: ($size+$distance-inner) * 2;
                    @include corner4;

                }

                &:nth-child(16) {
                    left: 0px;
                    top: ($size+$distance-inner) * 3;
                    @include corner1;

                }



            }

        }

        // Nine
        &-9 {
            @include item {

                &:nth-child(1) {
                    left: 0;
                    top: 0;
                    @include corner1;
                }

                &:nth-child(2) {
                    left: $size+$distance-inner;
                    top: 0;
                }

                &:nth-child(3) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                    @include corner2;
                }

                &:nth-child(4) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 1;
                }

                &:nth-child(5) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(7) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(8) {
                    left: 0;
                    top: ($size+$distance-inner) * 3;
                    @include corner4;

                }

                &:nth-child(9) {
                    left: 0;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(10) {
                    left: 0;
                    top: ($size+$distance-inner) * 1;
                }

                &:nth-child(11) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                    @include corner3;
                }

                &:nth-child(12) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 4;
                    @include corner1;
                }

                &:nth-child(13) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 5;
                    @include corner3;
                }

                &:nth-child(14) {
                    left: 0;
                    top: ($size+$distance-inner) * 5;
                    @include corner1;
                }
            }
        }

        // Zero
        &-0 {
            @include item {

                &:nth-child(1) {
                    left: 0;
                    top: 0;
                    @include corner1;
                }

                &:nth-child(2) {
                    left: $size+$distance-inner;
                    top: 0;
                }

                &:nth-child(3) {
                    left: ($size+$distance-inner) * 2;
                    top: 0;
                    @include corner2;
                }

                &:nth-child(4) {
                    left: ($size+$distance-inner) * 2;
                    top: $size+$distance-inner;
                }

                &:nth-child(5) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(6) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(7) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(8) {
                    left: ($size+$distance-inner) * 2;
                    top: ($size+$distance-inner) * 5;
                    @include corner3;
                }

                &:nth-child(9) {
                    left: ($size+$distance-inner) * 1;
                    top: ($size+$distance-inner) * 5;
                }

                &:nth-child(10) {
                    left: 0;
                    top: ($size+$distance-inner) * 5;
                    @include corner4;
                }

                &:nth-child(11) {
                    left: 0;
                    top: ($size+$distance-inner) * 4;
                }

                &:nth-child(12) {
                    left: 0;
                    top: ($size+$distance-inner) * 3;
                }

                &:nth-child(13) {
                    left: 0;
                    top: ($size+$distance-inner) * 2;
                }

                &:nth-child(14) {
                    left: 0;
                    top: $size+$distance-inner;
                }

            }
        }

    }
}
              
            
!

JS

              
                // the number changes in HTML
$( document ).ready( function () {
  
    if ( $('*[data-num-img]') ) {

        $('*[data-num-img]').each(function(){

            let val = $(this).text().trim();
            let valLength = val.length;
            let img = $(this).attr( 'data-num-img' ).split(',');
            $(this).html('');
            for (let i = 0; i < valLength; i++) {
                renderNums( val[i] , $(this), img )
            }

        });
        
    }


  function renderNums( num, elm, img ) {

        let totals = 0;

        if ( num * 1 === 0 ) {
            totals = 14;
        } else if ( num == 1 ) {
            totals = 7;
        } else if ( num == 2 ) {
            totals = 13;
        } else if ( num == 3 ) {
            totals = 14;
        } else if ( num == 4 ) {
            totals = 10;
        } else if ( num == 5 ) {
            totals = 13;
        } else if ( num == 6 ) {
            totals = 14;
        } else if ( num == 7 ) {
            totals = 8;
        } else if (num == 8) {
            totals = 16;
        } else if ( num == 9 ) {
            totals = 14;
        } else {
            return;
        }
   
        let item = `<div class="photo-group-${num}">`;    
        for (let i = 0, j = 0 ; i < totals; i++ ) {
            
            j = ( j > img.length - 1 ) ? j = 0 : j ; 
            item += `<div class='photo-group-${num}__item' style='background-image:url(${img[j]})'><a data-fancybox='gallery' href='${img[j]}'></a></div>`;
            j++;
        }
        item += '</div>';
 
        elm.append( item );

  }

});


              
            
!
999px

Console