March 29, 2024
Muse For You - Zoom Hover Box Widget - Adobe Muse CC - Web Design Ledger

How to Add a Unique Zoom Effect to Images in Adobe Muse

Add a Unique Zoom Effect to your Images in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Effects and mouse interaction can really make a website more dynamic and more visually engaging. In this article I will be going over the Zoom Hover Box Widget found at http://museforyoushop.com. With this widget you can have an image zoom in our out as the user hovers their mouse over the image. This can really direct the attention to the element or image you are trying to showcase within the hover box. Along with adding an image that zooms in on hover you can also add a gradient over the image, link the image to an internal page, external page, or anchor point, and add 3 titles over the image. Everything in the widget is customizable to allow for the perfect effect when hovering over the image.

Muse For You - Zoom Hover Box Widget - Adobe Muse CC - Web Design Ledger

The steps to add the Zoom Hover Box Widget are as follows:

1. Install the Zoom Hover Box Widget by clicking the .mulib file inside of the widget folder. This will install directly into the Adobe Muse library panel.

2. Drag and drop the widget from the library panel onto the Adobe Muse website. If you do not see the library panel go to Window > Library.

3. Add an image to the hover box by clicking on “Add File” within the “Image” section. To have the image be a certain width and height crop the image first within a cropping program, and then place within the widget. The image will then maintain its aspect ratio when being resized in Adobe Muse if the responsive options are set. You can also link the hover box to an internal link, external link, or anchor point within the “Link” option. Make sure that “Enable Link” is checked to enable the link.

Muse For You - Zoom Hover Box Widget - Adobe Muse CC - Web Design Ledger

4. Set a minimum width and a maximum width so the image does not get smaller than a certain size or larger than a certain size when resizing the browser.

5. Select the colors and set the angle for the gradient overlay within the “Gradient” section.

6. Customize the effect within the “Effect” section. You can set the hover speed, zoom amount, and rotation within this section. To have the image zoom in on hover enter a value greater than 1 in the zoom option. To have the image zoom out on hover enter a value less than 1. Entering a value of 1 will have no zoom, and the image will stay at its original size when hovering.

7. Add and style the title text within the “Title” sections. You can add up to 3 titles to the hover box.

8. Done!

Muse For You - Zoom Hover Box Widget - Adobe Muse CC - Web Design Ledger

For more tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing :).

John is an Adobe Muse ninja who spends most of his time creating Adobe Muse video tutorials and widgets for Adobe Muse. He is the creator of Muse For You. Visit Museforyoushop.com for more Adobe Muse video tutorials and widgets.

Leave a Reply

Your email address will not be published. Required fields are marked *