How to Add a 180 Degrees Effect to your Adobe Muse Website

Add a 180 Degrees Effect to your Adobe Muse Website. No Coding Skills Required.

  

I’ve always loved those great flip effects where one image shows on one side and then flips to reveal another image on the other side. We see this a lot on sports channels where team logos suddenly change with a 180 degree flip. I love how seamless it is, and it is a great way to showcase information in a more exciting way. I wanted to give Adobe Muse users access to the same effect on their website, and that is why I decided to create the 180° Text Reveal Hover Box Widget. With this widget you can easily add an image and reveal text when the user hovers over the image. The image rotates 180 degrees to reveal the text.

The steps are as follows:

1. Install the 180° Text Reveal Hover Box Widget. The widget will install into the Adobe Muse library panel.

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

3. Add an image. If you would like the image to be a certain dimension crop the image to that dimension and then place in the widget. For instance, if you wanted the image to be a perfect square then you could crop the image to be of equal width and height before adding to the widget. You can also set a max-width and a minimum width for the widget.

Visit the following website to crop images: http://birme.net/

If you would like to have the hover box link to an internal link, external link, or anchor point make sure the “Enable Link” option is selected. You can then style the link button in the “Link Button” section of the widget.

4. Set the effect speed in the “Effect” section of the widget.

5. Set the text background color in the “Effect” section of the widget.

6. Add and style the text in the “Text” section of the widget.

7. Add and style the link button in the “Link Button” section of the widget.

8. Done!

You now have a 180° text reveal hover box on your Adobe Muse website.

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

Happy Musing :).

Author: John

Collect by: uxfree.com

Top