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
A step-by-step walkthrough on creating your first site with Super
Learn how to add Navigation menus to your Super website.
Manage SEO settings in Super and improve your search engine ranking.
Learn how to create a simple blog website from scratch with Super and Notion
Learn how to upload and apply custom fonts to your Super website
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.
- Save your changes.
- Open your live Super site and refresh the page.
<link rel="stylesheet" href="https://sites.super.so/gallery-cards/reveal-v2.css">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:
- 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.
.notion-collection-gallery.large