September 20, 2020
Muse For You - How to Add a 180 Degrees Effect - Adobe Muse CC

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.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

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.

Muse For You - How to Add a 180 Degrees Effect - Adobe Muse CC

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.

Muse For You - How to Add a 180 Degrees Effect - Adobe Muse CC

For more video 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 *