Gallery Reveal

Reveal is a custom CSS style for Super gallery database cards.

It turns a Notion gallery database into an image-based grid with a smooth hover effect. On hover, the card reveals more content: the bordered box moves downward, and the description appears inside a bordered box near the bottom, creating a smooth reveal effect.

Database Sample

Creating your first Super site

A step-by-step walkthrough on creating your first site with Super

How to create navigation menus

Learn how to add Navigation menus to your Super website.

Improve SEO on your Super site

Manage SEO settings in Super and improve your search engine ranking.

Create a blog with Super

Learn how to create a simple blog website from scratch with Super and Notion

Upload custom fonts to your Super site

Learn how to upload and apply custom fonts to your Super website

How to add Notion forms to your Super site

Learn how to collect data through your Super site with Notion forms.

Recommended Notion setup

Before adding the CSS, prepare your Notion database like this:

Use a Gallery database view.
Set the card size to Large.
Use a page cover or image as the card preview.
Keep the page title short.
Show only the properties you want to appear on the card. This design works best with 2 visible properties only: Title and Description.
Hide extra properties that are not needed.

This style is designed for .notion-collection-gallery.large, so it works best with large gallery cards, and a full-width Notion page.

Installation instructions

Open your site in the Super Dashboard.
Go to Code.
Open the Head tab.
Paste the GlintGrid stylesheet.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/gallery-cards/reveal-v2.css">

Save your changes.
Open your live Super site and refresh the page.

Optional customization

You can customize the design by editing the values inside the top part of the CSS.

Most of the main design settings are inside this section:

.notion-collection-gallery.large {
  --gallery-columns-desktop: 3;
  --gallery-columns-tablet: 2;
  --gallery-columns-mobile: 1;

  --gallery-card-height: 330px;
  --gallery-card-radius: 0;
  --gallery-card-bg: #151a21;

  --gallery-text: #ffffff;
  --gallery-text-soft: rgba(255, 255, 255, 0.88);

  --gallery-overlay: rgba(10, 14, 20, 0.26);
  --gallery-overlay-hover: rgba(10, 14, 20, 0.02);

  --gallery-image-width: 155%;
  --gallery-image-start-position: 35% center;
  --gallery-image-end-position: 68% center;

  --gallery-image-start-transform: translateX(-120px) scale(1.04);
  --gallery-image-end-transform: translateX(0) scale(1.12);

  display: grid !important;
  grid-template-columns: repeat(var(--gallery-columns-desktop), minmax(0, 1fr)) !important;
  gap: 28px !important;
}

@media (max-width: 1024px) {
  .notion-collection-gallery.large {
    grid-template-columns: repeat(var(--gallery-columns-tablet), minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .notion-collection-gallery.large {
    grid-template-columns: repeat(var(--gallery-columns-mobile), minmax(0, 1fr)) !important;
  }
}

Example

Use these values to change the border radius.

.notion-collection-gallery.large {
  --gallery-card-radius: 24px;
}

.notion-collection-gallery.large .notion-collection-card,
.notion-collection-gallery.large .notion-collection-card__cover {
  border-radius: var(--gallery-card-radius) !important;
}

Notes and limitations

It only changes the visual style of the gallery cards. It does not change how the Notion database works.
The CSS is designed for large Super gallery database cards using this selector:

.notion-collection-gallery.large

If the database is not using a large gallery view, the design may not apply as expected.
Very long titles may wrap into several lines. For the best design, use short and clear page titles.
Visible properties appear as supporting text on the card. If too many properties are visible, the card may look crowded or the properties will not appear.
Hover effects may behave differently on mobile and tablet devices because touch screens do not have the same hover behavior as desktop.
If your site already has custom CSS for gallery cards (Large), the styles may conflict and may need small adjustments.
If the style does not appear immediately, save the code again and refresh the live site.