Custom Styling

Last updated: March 2, 2026

Zoomora includes a complete set of default styles that work out of the box. When you need to adapt the lightbox to match your design system, you can override any style by targeting Zoomora’s CSS classes after importing or linking the default stylesheet.

How to Override Styles

Always load your custom styles after zoomora.css so your rules take precedence:

<link rel="stylesheet" href="zoomora.css">
<link rel="stylesheet" href="your-styles.css"> <!-- after zoomora.css -->

Or in CSS/SCSS:

@import 'zoomora.css';

// Your overrides below
.zoomora { ... }

Main Container

The root lightbox element. Controls the overlay background and backdrop blur:

.zoomora {
  background: rgba(0, 0, 0, 0.97); /* darker overlay */
  backdrop-filter: blur(30px);      /* stronger blur */
}

Header

The top bar containing the counter and control buttons:

.zoomora-header {
  padding: 16px 24px; /* tighter padding */
}

Counter

The image counter pill in the top left:

.zoomora-counter {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
}

Control Buttons

All header buttons and navigation arrows share the base .zoomora-btn and .zoomora-nav classes:

/* All buttons */
.zoomora-btn,
.zoomora-nav {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px; /* square-ish instead of round */
}

/* Button hover state */
.zoomora-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Active state (e.g. auto-hide button when enabled) */
.zoomora-btn.active {
  background: rgba(255, 255, 255, 0.3);
  color: #00bbfa;
}

Navigation Arrows

Prev and next navigation buttons:

.zoomora-nav.prev {
  left: 30px;
}

.zoomora-nav.next {
  right: 30px;
}

/* Hover with directional nudge */
.zoomora-nav.prev:hover {
  transform: translateY(-50%) translateX(-3px);
}

.zoomora-nav.next:hover {
  transform: translateY(-50%) translateX(3px);
}

Caption

The caption bar that appears above the thumbnail strip:

.zoomora-caption {
  font-size: 13px;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  max-width: 70%;
}

/* Caption when thumbnails are hidden */
.zoomora-caption.no-thumbnails {
  bottom: 24px;
}

Thumbnail Strip

The scrollable thumbnail row at the bottom:

.zoomora-thumbnails {
  padding: 6px;
  gap: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
}

Thumbnail Items

Individual thumbnails and the active state:

/* Default thumbnail */
.zoomora-thumb {
  width: 44px;
  height: 64px;
  border-radius: 6px;
  opacity: 0.5;
}

/* Active thumbnail */
.zoomora-thumb.active {
  width: 88px;
  opacity: 1;
}

/* Hover state */
.zoomora-thumb:hover {
  opacity: 0.8;
}

Loading Spinner

The spinner shown while images load:

.zoomora-loading {
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #00bbfa; /* branded colour */
  width: 40px;
  height: 40px;
}

Fullscreen State

Styles applied when fullscreen mode is active:

.zoomora.fullscreen {
  background: #000;
}

Controls-Hidden State

When auto-hide is active and controls have faded out, Zoomora adds the controls-hidden class to the root element. You can use this to apply additional styles during the hidden state:

/* Hide the cursor too when controls are hidden */
.zoomora.controls-hidden {
  cursor: none;
}

Responsive Overrides

Zoomora includes responsive styles for screens below 768px. You can extend or override these:

@media (max-width: 768px) {
  .zoomora-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .zoomora-caption {
    font-size: 12px;
    max-width: 85%;
  }

  .zoomora-thumb {
    width: 36px;
    height: 52px;
  }

  .zoomora-thumb.active {
    width: 56px;
  }
}

CSS Class Reference

Class	Element
`.zoomora`	Root overlay container
`.zoomora-container`	Inner container (scales on open)
`.zoomora-header`	Top bar with counter and buttons
`.zoomora-counter`	Image counter pill
`.zoomora-controls`	Button group in header
`.zoomora-btn`	Any header control button
`.zoomora-btn.active`	Active state (e.g. auto-hide on)
`.zoomora-content`	Main image display area
`.zoomora-slides-container`	Slide wrapper
`.zoomora-slide`	Individual slide
`.zoomora-media`	The `<img>` element inside the lightbox
`.zoomora-media.zoomed`	Image in zoomed state
`.zoomora-media.dragging`	Image being dragged
`.zoomora-media.no-zoom`	Image that cannot be zoomed
`.zoomora-nav`	Prev/next arrow buttons
`.zoomora-nav.prev`	Previous arrow
`.zoomora-nav.next`	Next arrow
`.zoomora-caption`	Caption bar
`.zoomora-thumbnails`	Thumbnail strip container
`.zoomora-thumbnails.thumbs-hidden`	Thumbnail strip when toggled off
`.zoomora-thumb`	Individual thumbnail
`.zoomora-thumb.active`	Currently active thumbnail
`.zoomora-loading`	Loading spinner
`.zoomora-video-container`	Container for local video
`.zoomora-play-button`	Play button overlay on video
`.zoomora.active`	Lightbox when open
`.zoomora.fullscreen`	Lightbox in fullscreen mode
`.zoomora.controls-hidden`	Lightbox when controls are hidden

Next Step

Read Troubleshooting and FAQ for solutions to common issues and answers to frequently asked questions.

Quick Links