Webmasters Gallery

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

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.

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.

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!

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

Happy Musing :).

Read More at How to Add a Unique Zoom Effect to Images in Adobe Muse