Change Item settings in Widget
Creating an engaging and interactive experience for your website visitors can make a significant difference in how they interact with your content. One powerful way to enhance visual interaction is through hover effects. In the Desktop version of our platform, you can customize the hover effect to reveal important post information—like captions, post dates, likes, and comments—when users hover over an image.
This feature not only adds a dynamic touch to your media display but also provides additional context to your content at a glance. In this guide, we’ll walk you through enabling and customizing the hover effect for your gallery.
⚠️ Note: Due to Instagram API limitations, likes and comment counts cannot be displayed for Instagram Personal Accounts.
Enable the Hover Effect
Customize the Background Section
Customize the Content Section
Tips for Best Results
Before customizing, you need to activate the hover effect feature. This feature is only available on the Desktop version of your site.
Navigate to Items settings.
Locate the "Hover Effect" toggle or checkbox.
Enable it by switching it to the “On” position.
Once enabled, hovering over a media item will reveal:
- Caption
- Date of Post
- Like Count
- Comment Count
Note: Likes and comments will only be shown for Business or Creator Instagram accounts due to API limitations.
The background of your hover effect can be customized to align with your brand or website theme. This involves adjusting the color and opacity of the overlay.
Go to the Background Section settings.
Choose your preferred Background Color using a color picker or hex code.
Adjust the Opacity slider to control the transparency (0% = fully transparent, 100% = fully opaque).
A well-balanced background opacity helps make the hover content stand out without overpowering the image beneath.
In this section, you can tailor the appearance of the hover text. This includes customizing the color, size, position, and weight of the text content.
- Text Color: Choose a color that contrasts well with your background for visibility.
- Text Position: Align your text to the top, center, or bottom.
- Font Size: Adjust to suit your design—bigger for emphasis, smaller for minimalism.
- Font Weight: Choose from light, regular, bold, etc., depending on your style.
Open the Content Section customization panel.
Select your preferred Text Color.
Choose the Text Position from the dropdown menu.
Set the desired Font Size using a slider or input field.
Pick the appropriate Font Weight from the available options.
✅ Tip: Preview your changes in real-time to see what works best with your images.
- Use a semi-transparent dark background (e.g., black at 60%) for light images to make text readable.
- Choose bold white text for high contrast and clarity.
- Test your layout on different screen sizes to ensure consistency.
- Stick with a uniform hover effect across your gallery for visual harmony.
Customizing the hover effect can significantly enhance user engagement and provide key post details without cluttering your gallery layout. With just a few simple adjustments, you can create an interactive and informative experience tailored to your brand.
Take advantage of the customization tools to highlight your content effectively and elevate your website’s visual appeal—just remember that likes and comments are only shown for eligible Instagram accounts due to API restrictions.
If you meet any issue while trying to fix these errors, do not hesitate to drop us a message in the live chat or email us at support@socialhead.io . We would love to help you out!
This feature not only adds a dynamic touch to your media display but also provides additional context to your content at a glance. In this guide, we’ll walk you through enabling and customizing the hover effect for your gallery.
⚠️ Note: Due to Instagram API limitations, likes and comment counts cannot be displayed for Instagram Personal Accounts.
Table of Contents
Enable the Hover Effect
Customize the Background Section
Customize the Content Section
Tips for Best Results
1. Enable the Hover Effect
Before customizing, you need to activate the hover effect feature. This feature is only available on the Desktop version of your site.
Steps:
Navigate to Items settings.
Locate the "Hover Effect" toggle or checkbox.
Enable it by switching it to the “On” position.
Once enabled, hovering over a media item will reveal:
- Caption
- Date of Post
- Like Count
- Comment Count
Note: Likes and comments will only be shown for Business or Creator Instagram accounts due to API limitations.
2. Customize the Background Section
The background of your hover effect can be customized to align with your brand or website theme. This involves adjusting the color and opacity of the overlay.
Steps:
Go to the Background Section settings.
Choose your preferred Background Color using a color picker or hex code.
Adjust the Opacity slider to control the transparency (0% = fully transparent, 100% = fully opaque).
A well-balanced background opacity helps make the hover content stand out without overpowering the image beneath.
3. Customize the Content Section
In this section, you can tailor the appearance of the hover text. This includes customizing the color, size, position, and weight of the text content.
Options Available:
- Text Color: Choose a color that contrasts well with your background for visibility.
- Text Position: Align your text to the top, center, or bottom.
- Font Size: Adjust to suit your design—bigger for emphasis, smaller for minimalism.
- Font Weight: Choose from light, regular, bold, etc., depending on your style.
Steps:
Open the Content Section customization panel.
Select your preferred Text Color.
Choose the Text Position from the dropdown menu.
Set the desired Font Size using a slider or input field.
Pick the appropriate Font Weight from the available options.
✅ Tip: Preview your changes in real-time to see what works best with your images.
4. Tips for Best Results
- Use a semi-transparent dark background (e.g., black at 60%) for light images to make text readable.
- Choose bold white text for high contrast and clarity.
- Test your layout on different screen sizes to ensure consistency.
- Stick with a uniform hover effect across your gallery for visual harmony.
Customizing the hover effect can significantly enhance user engagement and provide key post details without cluttering your gallery layout. With just a few simple adjustments, you can create an interactive and informative experience tailored to your brand.
Take advantage of the customization tools to highlight your content effectively and elevate your website’s visual appeal—just remember that likes and comments are only shown for eligible Instagram accounts due to API restrictions.
If you meet any issue while trying to fix these errors, do not hesitate to drop us a message in the live chat or email us at support@socialhead.io . We would love to help you out!
Updated on: 04/04/2025
Thank you!