The Blog module's Overlay options let you customize hover effects on featured images with colors, icons, and styles to improve interactivity and design.
Where to Find the Overlay Options
Open the module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Overlay option group.
Overlay Option Overview
Featured Image Overlay: Toggle this option to "Yes" to enable an overlay effect on the featured image when hovered over. Once enabled, additional customization options appear.
Overlay Icon Color: Choose the overlay icon's color. You can use your site’s color palette or the color picker.
Tip: To hide the icon and display only the overlay background, set the icon color to transparent.
Overlay Background Color: Select the color for the overlay background. You can pick a shade from your site’s color palette or use the color picker for a personalized hue.
Overlay Icon: Select an icon to display on hover from the available options.
Tips for Using Overlay Options
Highlight Key Posts: Use contrasting overlay colors and icons to draw attention to featured content.
Minimal Design: Hide the icon by setting its color to transparent for a simple overlay effect.
Brand Consistency: Match the overlay and icon colors to your site’s branding for a cohesive design.
Test Visibility: Ensure the overlay colors and icons are easily distinguishable over the featured image.