• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Rollover with changing/add text effect

Community Beginner ,
Feb 16, 2018 Feb 16, 2018

Copy link to clipboard

Copied

Hi, I new on Muse. trying making Portfolio and have small idea about rollover but its about 2days and cant figure out how.
is a bit fast but hope u can imagine what i want. First rollover and change text, second rollover and add more text.
thanks for help

giphy.gif
giphy.gif

Views

2.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guide , Feb 17, 2018 Feb 17, 2018

by Pavel steps

These are not my steps. This is your interpretation of my steps. My steps work correctly 

Votes

Translate

Translate
Guide ,
Feb 16, 2018 Feb 16, 2018

Copy link to clipboard

Copied

Create two text frames. For the first text frame, set the opacity to 100% in the standard state, and the opacity to 0% in the hover state. For the second text frame, set it the other way around - standard 0%, hover 100%.

Place both text frames in the state button.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 17, 2018 Feb 17, 2018

Copy link to clipboard

Copied

I tried this steps, but unfortunately get this weird error when want to Preview. Tried deleted last steps, but same isuess. Any Idea?. I can preview my other page but always on this one pop up error and ending Muse process...
SHOYqN5.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 17, 2018 Feb 17, 2018

Copy link to clipboard

Copied

fixed that error, duplicate page. Deleted old, probs solved. Dont know why, but work for me...back to help, somehow that steps not work for me. Maybe i doing something wrong..
my steps:
          2 text frame on same position
           1.layers 100% opacity in normal state and 0%opacity in hover state (example: email)
           2.layers under 0% opacity in normal state and 100% opacity in hover state (example: abc@email.com)
           puting both text frame in to state button
  When i press preview, the second layers show up but the first not dissapear

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 17, 2018 Feb 17, 2018

Copy link to clipboard

Copied

Back to error. I found where its isuess, when i cant find right way to make rollover like my idea. I found kind of widgets which should help me easily doing that unfortunately this widget fck*ed my Muse and getting error then shutdown program.
Solution is: delete widget and duplicate currently page where widget was applied.
I used Text Hover Effect, on Demo work flawless
https://musefree.com/text-hover-effect/
http://https://musefree.com/demo/mulib/12/index.html

About my rollover if someone want rollover with similar effect like my first gif. in first post.
I tried steps by Pavel Homeriki but not work for me, i found my own way is a bit weird maybe even wrong, but is exactly what i need. The main isuess was 0 % opacity in hover state, my text somehow dont dissapearthe second layer show up with hover effect.


my way

f86513eef4dede9345749b25c7a5d19a.gif

by Pavel steps

3a5bb68094e69b5aec8b73e711a9ce79.gif

Here is my bizarre steps is work only for my case, because instead of using opacity i refill with same color as my Background and put it under second layers, now u know is imposible way if u have video or photo on BG. I have white BG...

make 2 text frame in same position

1. ''Email'' text frame just change hover state to white and put under second layers td.....@gmail.com

2. "td....@gmail.com'' 0 % opacity on Normal State and hover state 100% opacity with blue color

3. put it together on state button and work flawfless

is maybe stupid way to do that, but i cant figure out why my opacity on first layers not work

Sorry for my bad english and hope for another better solution.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 17, 2018 Feb 17, 2018

Copy link to clipboard

Copied

by Pavel steps

These are not my steps. This is your interpretation of my steps. My steps work correctly 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 17, 2018 Feb 17, 2018

Copy link to clipboard

Copied

Sir, i swear doing exactly like you...maybe i figure out where is problem. Im on mobile now so cant try it. But i think the isuess is system font which i use for my Project? and not web font like you?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Feb 17, 2018 Feb 17, 2018

Copy link to clipboard

Copied

Never use system fonts.

3405d28bed.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 18, 2018 Feb 18, 2018

Copy link to clipboard

Copied

LATEST

yes, problem was on system fonts...thanks you for help.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines