Mosaic Gallery

Appearance

Custom CSS Rules ​

To adjust the gallery to your personal taste, it can be customized through CSS rules.

The following classes are used by this library:

  • .mscglry-gallery: the main gallery container
  • .mscglry-entry: every gallery element (direct child of .mscglry-gallery)
  • .mscglry-entry-hidden: assinged to a gallery element when it is hidden (Justification.Hide for the justified layout)

Each class can be customized by defining additional css rules for these classes.

To add a simple solid border to every gallery, simply set the border property on the corresponding class.

css
.mscglry-gallery {
    border: 2px solid red;
}

To add rounded corners to all the gallery images, the border-radius property can be used.

css
.mscglry-entry {
    border-radius: 4px;
}

Animating image movement ​

The repositioning of the images can also be animated through css. The position is set through the left and top property, thus enabling animations for these will let the images animate over the screen when the gallery is resized and the image are repositioned. Do note that this will overwrite the animations for the hover effects. Thus, when hover effects are also used at the same time, the animation definitions should be copied over from their original definitions.

css
.mscglry-entry {
    transition:
        left 0.3s ease-out,
        top 0.3s ease-out,
        width 0.3s ease-out,
        height 0.3s ease-out !important;
}

Image cropping ​

When the height tolerance is exceeded while using the justified layout, images are automatically cropped to fit into the calculated bounding box using the css object-fit property. This can be also be overwritten, to e.g. stretch the image to fit (this will mess up the aspect ratio of the image).

css
.mscglry-entry img {
    object-fit: fill !important;
}

Adjusting Hover Effects ​

The hover effects are implemented in pure css. Thus, they can also be adjusted through custom css rules.

To speed up the scale animation for example, the transition property of the img element inside the gallery entry can be modified.

css
.mscglry-entry img {
    transition: transform 0.1s ease !important;
}

Do note that HoverEffect.Scale is animated on the img element inside the gallery entry, while the HoverEffect.Lift and HoverEffect.Grayscale effects are done on the gallery entry itself. Thus, to modify the speed and distance of the lift animation, they have to be modified on the .mscglry-entry class directly.

css
.mscglry-entry {
    transition:
        transform 1s ease,
        box-shadow 1s ease !important;
}
.mscglry-gallery[mscglry-hover-effect="lift"] .mscglry-entry:hover {
    transform: translateY(-15px) !important;
}