The Card Overlay widget is a versatile tool that adds interactive animation to your website. When users hover over the card, a description smoothly appears, increasing engagement and creating a polished, dynamic visual effect. It can be combined with other platform features, such as staggered animations and load effects, for added visual appeal.
Key Features
Interactive Hover Effect: Description overlay appears on hover.
Customizable Backgrounds: Solid colors, gradients, images, videos, or patterns.
Overlay Options: Add color overlays to improve text readability over media.
Flexible Card Shapes: Adjust size and shape to fit your content.
Icon Support: Add and style icons to enhance the card.
Border Customization: Set border color, width, and rounded corners.
Font Styling: Full control over fonts, sizes, colors, and styles for titles, descriptions, and icons.
Animation Integration: Use with staggered effects and loading animations.
Cloneable Setup: Duplicate perfected cards for consistent design.
How to Use
Access the Widget
Go to your Back Office, click the Widget icon, and select Card Overlay.
Add Content
Upload a background image and enter the card title.
Optionally add and style an icon.
Adjust Card Size & Shape
Resize the card to ensure your text fits comfortably.
Customize Background
Choose a background type: color, gradient, image, video, or pattern.
If using images or videos, add a color overlay to enhance readability.
Style Borders
Apply borders with your preferred color, width, and corner radius.
Edit Fonts & Icons
Customize fonts and styles for the title, description, and icon.
Insert and Save
Insert the widget into your page.
Once configured, clone the card to maintain consistent styling across multiple instances.
The Card Overlay widget is ideal for promotional tiles, feature highlights, or interactive content blocks, adding both functionality and style to your website.
Watch the Video Demo:
Video Transcript:
The Card overlay widget is a great tool that will allow you to add animation and interaction to your website.
This is where you place your mouse on the item and your description appears.
This can also be used in conjunction with different features on your website, such as the animation load and the staggered effect.
We can also set different backgrounds to make this more visually appealing.
To set this up, please go into your back office, click on the widget icon, and then choose your card overlay.
Choose the image that you would like to appear in the background and add your title.
At this point you can select the type of icon you require.
This is completely optional of course, and you can choose the style of the icon and in your description.
Please ensure that the shape and size of your card can accommodate the number of words you add.
Once you're done with the content, please move on to the settings.
At this point, we can adjust the shape of your card.
So change any background colours or set a gradient image, video or pattern.
If you choose a colour or gradient your colour palette will appear or you can also add a custom colour.
If you choose an image or video you will also have the options to add an overlay to allow the easy reading.
You can adjust the opacity and the colour of the overlay.
You may also choose to add a border.
Once again you can choose the colour and the width of your border.
You can optionally add a corner radius.
This is where we can round off the corners of your item.
To adjust the fonts, please go to the next tab.
Once again you can adjust your overlay colour.
If you click on title or description, it will allow you to edit your fonts, styles and boldness and sizes and colours.
The icon will allow you to change the colour of the icon.
Once you're done, insert your widget.
As there is quite a lot of setup on one widget, I would recommend that you perfect the one widget and then clone this as many times as you need.
Comments
0 comments
Please sign in to leave a comment.