Welcome to the

Hover Reveal Social Card Widget

Present your social media links in a unique way with the Hover Reveal Social Card Widget from Muse For You.

Using the widget - Initial Steps

01

In the examples below, each Hover Box has different background color and opacity, effect hover speed, text, and icon styling, and thus, a unique instance number.

Drag the 'Hover Reveal Social Card' widget from the Library Panel (Window > Library) and place onto your Adobe Muse website. Within widget options, add an image, style the effect, icons, and text, and done!

FEATURE #ONE

Add Multiple Instances on One Page

FEATURE #ONE

Add multiple instances on one page

  • In 'Instance' section within widget options, put a unique instance number for each new hover box.
  • If all the hover boxes on a page have same styling, the instance number can be the same.
  • If 'Enable Link' option is enabled or disabled for one hover box, all other hover boxes with same instance number must have the same setting.
  • If you would like to have different colors and settings, add a new hover box, and change the instance number for that hover box. This method works for breakpoints also.

FEATURE #THREE

All about Icons and Linking

FEATURE #THREE

All about Icons and Linking

  • To change the icon, click on the 'Font Awesome Icons' link in 'Icons' section within widget options. From the Font Awesome website copy and paste the icon name into the 'Icon' option. In this section, you can also add a maximum of 4 Font Awesome icons, add a link, change icon color and size, change icon background color for normal and hover state, background size and border radius. Also, you can choose to open links in a new page by enabling the 'Open Link in New Page' option.
  • Linking Internal Pages - if the page name is 'About Us', the link would be - ./about-us.html
    Home Page is always -
    ./index.html
    Linking Anchor Points - if there's an anchor point called 'our_team' on 'About Us' page, the link would be -
    ./about-us.html#our_team
    Linking External Pages - http://museforyoushop.com

FEATURE #TWO

Set the Image to be Respnsive

FEATURE #TWO

Set the image to be Responsive

  • Via built-in Adobe Muse 'Resize' option in the upper toolbar, you can change the width and height of the hover box and set it to - responsive width, responsive with and height, stretch to browser width, or none.
  • Pinning for the Hover Box works the same way as any other element on your Muse website.

FEATURE #FOUR

Complete Control over Text Customization

FEATURE #FOUR

Complete control over text customization

  • In 'Text' section within widget options, you can customize the heading and paragraph text color, font size (1em = 16px), font weight, font style (normal, italic, or oblique), text transformation (uppercase, lowercase, or none), letter spacing, and line height
  • To change the font type, select the widget and go to the built-in Adobe Muse 'Text' option. From here, you can select any web font.
  • You can change the font size for a specific breakpoint in 'Breakpoint' section within widget options.

FEATURE #FIVE

What's in the 'Effect' section

FEATURE #FIVE

What's in the 'Effect' section

In 'Effect' section within hover box widget options, you can:

  • Select a background color and opacity for the box when hovered over.
  • Set effect hover speed in seconds.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials