Thumbnail Settings

Overlay

May differ slightly from the actual interface.

Key Point:
Set a color layer that overlays background elements. Useful for improving readability over photos or videos.

What this changes:
Evens out the brightness contrast of the subject, making text easier to read.

Adjustment tips:
Start with a solid color and set the density first. Only switch to a gradient when needed to avoid visual inconsistencies.

Settings

• Color / Gradient: Set a solid color or gradient to adjust the background appearance.
• Opacity: Set the opacity to control the overall visibility of the element.
• Mix Blend Mode: Set the blend mode to adjust how the layer interacts with the background.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

The thumbnail Overlay applies only on top of the thumbnail image (it is independent from the button background Overlay). Hover-state Overlay can also be configured separately.

Image

May differ slightly from the actual interface.

Key Point:
Configure how images or videos are displayed. Fit, position, and repeat settings significantly affect the appearance.

What this changes:
The same asset can have dramatically different visual impact depending on these settings.

Adjustment tips:
First choose the Fit method, then adjust the position, and finally fine-tune readability with Opacity and Overlay settings — in that order.

Settings

• Media type (Image / Video): Select the type of media to use as the background.
• Image: Image selection, Repeat, Fit Method, Rotation (deg), Opacity: Adjust how the thumbnail image appears to highlight the key visual.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Color

May differ slightly from the actual interface.

Key Point:
Set the base color. This is the foundation color of the layer structure.

What this changes:
The final impression is determined by the relationship between overlay, text color, and this base color.

Adjustment tips:
Prioritize colors that maintain readability when combined with text and background, rather than colors that look striking on their own.

Settings

• Base Color: Set the base color to define the foundation of the element.
• Opacity: Set the opacity to control the overall visibility of the element.
• Blend Mode: Select the blend mode to optimize how the background and text interact.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Hover color Transition limitation:
Because the thumbnail color transitions the background property directly, switching between normal = solid color and hover = gradient (or vice versa) will not produce a smooth Transition — the change will be instant. This is due to the CSS specification: background-color (solid) and background-image: linear-gradient() (gradient) are different properties, and browsers cannot animate between them. For a smooth Transition, ensure that both normal and hover states use either solid colors or gradients consistently.

Size

May differ slightly from the actual interface.

Key Point:
Set the display size including Width and Height. Use this to optimize the appearance per device.

What this changes:
Even with the same content, size settings affect visibility and visual impression.

Adjustment tips:
After finalizing on PC, check SP individually and verify there are no text wrapping or spacing issues.

Settings

• Width: Set the width to adjust the display area.
• Height: Set the height to adjust the element's density and visibility.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Border

May differ slightly from the actual interface.

Key Point:
Set the border color, thickness, and style. This defines the element's outline and helps users recognize it as a clickable element.

What this changes:
Even with a light background, a border makes the boundary clearly visible.

Adjustment tips:
Overly thick borders reduce the prominence of the text, so start with around 1px and adjust from there.

Settings

• Border (ON/OFF): Toggle the border on or off to control whether the outline is emphasized.
• Color: Set the color to adjust element visibility and design consistency.
• Width: Set the border width to control the line thickness.
• Style: Select the style to adjust the appearance of lines and decoration.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Border Radius

May differ slightly from the actual interface.

Key Point:
Set the corner roundness of the element. Adjust your brand tone (formal or soft) at the impression level.

What this changes:
The perceived roundness depends on the ratio between the Border Radius value and the element size.

Adjustment tips:
Aim for roughly 20-35% of the element height as a starting point for a balanced look that is neither too round nor too sharp.

Settings

• Border Radius: Set the corner radius to shape the element's impression.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Position

May differ slightly from the actual interface.

Key Point:
Set the element's placement position. Control overlap and distance relative to surrounding elements.

What this changes:
Position settings have a wide impact and can cause layout issues if used incorrectly.

Adjustment tips:
Start with relative positioning first, and use absolute positioning only where specifically needed for easier maintenance.

Settings

• Horizontal (Left / Center / Right): Set the horizontal placement to align the layout's center of gravity.
• Vertical (Top / Center / Bottom): Set the vertical placement to optimize the top-bottom balance.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Opacity

May differ slightly from the actual interface.

Key Point:
Set the overall opacity and blend mode of the element. Adjust how it visually interacts with the background.

What this changes:
Even the same color can produce vastly different impressions depending on Opacity and Blend Mode.

Adjustment tips:
If readability suffers, correct the text color and background contrast first, then adjust Opacity.

Settings

• Opacity: Set the opacity to control the overall visibility of the element.
• Mix Blend Mode: Set the blend mode to adjust how the element interacts with the background.
• Responsive: Enable per-device settings to prevent layout issues across breakpoints.

Transition

May differ slightly from the actual interface.

Key Point:
Set the speed of change from the normal state to the hover state. This controls the "feel" of the interaction.

What this changes:
If too fast, the change goes unnoticed; if too slow, it feels sluggish.

Adjustment tips:
Start with a Duration of 200-350ms as a baseline, then add delay or custom Easing only where enhanced effects are needed.

Settings

• Duration (ms): Set the duration of the change to control the speed of the effect.
• Delay (ms): Set the delay to adjust the animation start timing.
• Easing: Set the speed curve to shape the feel of the motion.
• Custom Value: Specify a custom Easing value (CSS cubic-bezier format) for fine-tuned control over the change behavior.
• Reset: Reset this section's settings to their defaults.

The thumbnail Transition applies to hover changes across all thumbnail properties: Overlay, Image, Color, Border, Border Radius, and Opacity. It operates independently from the button body and icon Transitions.

Differences from Background and Band:
Thumbnails do not include Pattern or Transform (Skew) settings. If you need a decorative layer with patterns, use the Band Settings instead. On the other hand, Thumbnails offer Size, Border, Border Radius, Position, and Opacity settings that are not available in Background Settings.

Related FAQ

• 圖片或影片沒有顯示時的檢查方式 – ZenBlocks buttonBasic
• 縮圖與背景的差異與選用 – ZenBlocks buttonBasic