Welcome to the

Diagonal Slide Hover Box Widget

Add a unique hover effect over your images with the Diagonal Slide Hover Box Widget from Muse For You.

Using the widget - Initial Steps


In the examples below, each Hover Box has different background and slide transition colors, effect hover speeds, text, and text alignment, and thus, a unique instance number.

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

Feature #One - Add Multiple Instances on One Page


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 - Complete Control over Text Customization


Complete control over text customization

  • In 'Text' section within widget options, you can customize the 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 text alignment, expand the 'Text Alignment' section within widget options. If 'Center Text' option is selected, the text will automatically be centered within the box. However, if you want your text to be aligned to top-left, top-right, bottom-left, or bottom-right, enable the 'Align Text' option and then select the alignment accordingly. In this section, you can also set the 'Align Amount' from 'left or right' and 'top or bottom' in pixels.
  • 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 #Two - Set the Image to be Responsive


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 - All About Linking


All about Linking

  • In 'Image' section within widget options, you can apply link to the hover box. Be sure the 'Enable Link' option is selected for the link to work. Right next to this option, you can choose to 'Open Link in a New Page'.
  • Linking Internal Pages - if the page name is 'About Us', the link would be - ./about-us.html
    Home Page is always -
    Linking Anchor Points - if there's an anchor point called 'our_team' on 'About Us' page, the link would be -

Feature #Five - What's in the 'Effect' section


What's in the 'Effect' section

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

  • Select a background color for the box when hovered over.
  • Select a slide transition color when hovered over.
  • CSet the background hover transition and slide transition speeds in seconds.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.



Browse Widgets