image-mosaic

Install

Method 1

npm i @rgarciadelongoria/image-mosaic

Method 2

Import file directly from unpkg URL.

https://unpkg.com/@rgarciadelongoria/[email protected]/src/image-mosaic.js

Method 3

You can copy and paste de code from src/image-mosaic.js file.

Web Component to display a mosaic of images

With this component you can display from 1 to 4 mosaic of images. The default appearance of each mosaic depends on the number of images.

Examples

jsfiddle DEMO

4 pictures:

<image-mosaic
  image1="https://picsum.photos/id/152/400/400"
  image2="https://picsum.photos/id/159/400/400"
  image3="https://picsum.photos/id/175/400/400"
  image4="https://picsum.photos/id/237/400/400">
</image-mosaic>

3 pictures:

<image-mosaic
  image1="https://picsum.photos/id/152/400/400"
  image2="https://picsum.photos/id/159/400/400"
  image3="https://picsum.photos/id/175/400/400">
</image-mosaic>

2 pictures:

<image-mosaic
  image1="https://picsum.photos/id/152/400/400"
  image2="https://picsum.photos/id/159/400/400">
</image-mosaic>

1 picture:

<image-mosaic image1="https://picsum.photos/id/152/400/400"></image-mosaic>

Custom CSS

<image-mosaic class="custom-image-mosaic"
    image1="https://picsum.photos/id/152/400/400?styles=background-position: center -50px;"
    image2="https://picsum.photos/id/159/400/400?styles=background-position: 75px center;"
    image3="https://picsum.photos/id/175/400/400?styles=background-position: 0 -40px;background-size: 60%;"
    image4="https://picsum.photos/id/237/400/400?styles=background-position: 35px 45px;">
</image-mosaic>

Custom CSS clip-path and clear-styles property

<image-mosaic
    image1="https://picsum.photos/id/152/400/400?styles=clip-path: polygon(0 0, 20% 0, 80% 100%, 0% 100%);"
    image2="https://picsum.photos/id/159/400/400?styles=clip-path: polygon(100% 0, 20% 0, 80% 100%, 100% 100%);"
    image3="https://picsum.photos/id/175/400/400?styles=clip-path: polygon(10% 10%, 10% 90%, 25% 90%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 90%, 90% 90%, 90% 10%);>
</image-mosaic>