Streaming live at 10am (PST)

Hide image until target (link block) is rolled over?


#1

I have a page (new pt page). It has 2 link blocks currently, “arm” and “back”. I have two images below it (it will ultimately have 5-6 images and corresponding link blocks). One image is just an outline, and the second image has red indicating a body part (such as “arm”). I’d like the blank outline to load and remain visible with the images containing red only appearing when the appropriate link block is rolled over.

I did an interaction using the Link block as the trigger, and top (red) image as the target sitting opacity to 0% and ending at 100%. What I don’t understand is that the red image is still visible (lower opacity, but visible) when the page loads. Then once over the link block, it goes away (fully) and gets brighter as you scroll over it. My intention is that it is not viable at all, until you roll over, then it become visible.

This was a simple “image swap” procedure in Dreamworks (like this one my photography site where when you roll over the locations the image changes -http://www.greene-art.com/about_me.html).

Any help appreciated. I’m obviously missing something because I am sure this can be done.

Show link: https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=23e12fe2d840691719020222e8459bd1


Here is my public share link: **LINK**https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=dbfa34678755c105cc29bdb8a8641764
(how to access public share link)


#2

Hi Louis @IPT

Just curious why you used the mouse over element trigger instead of the mouse hover trigger?

If you use a mouse hover trigger, the animation should work as expected.

Is this how you want it to animate?
CloudApp

Also, make sure you apply the trigger to one element: either the link block or the text block inside.

Hope this is helpful. If you have any other questions, please don’t hesitate to reach out and I’ll be glad to help.


#3

You said, Mouse over element vs mouse hover trigger?

Good question, not sure. My lack of understanding most likely, and the terminology seemed to be what I wanted (being the mouse was over the element I wanted to use as a trigger). Now that you asked, I realize I really don’t understand the difference between the two of them.

Yes, that is the action I was looking for. Thanks, I’ll have to take a closer look at what you did and try and replicate it with other layers.


#4

So close…the rollover animation works. What is odd, is that the “neck pain” image is visible when the page loads (it shouldn’t be). As soon as you roll over a trigger it goes away, and stays away acting as it should from the begining. It is set to be hiden until the trigger is hovered over (and it does this once it is forced to go away by rolling over a trigger). What’s causing it to be initially visible?

I might add I noticed this activity her on a different computer than the one I am building the site on.

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=85bf562b302d343a914f5d56cc2548f3


#5

Hi again Louis @IPT

First, Mouse hover means when the mouse is over an element. Whether the cursor is on the edge of the element, in the middle, or anywhere over the element it doesn’t matter. On the other hand, Mouse MOVE over element means as the mouse is moving over the element. Meaning, as you move the cursor from one edge of the element to the other edge like in this example:

Second, seems you’ve added an initial state to the “on hover out” animation. That’s the reason you’re seeing the image initially. You don’t need to add an initial state to the “on hover out” animations.

Also, do delete any triggers that you’re nor using. They can create conflict and the animations may fail.

CloudApp

Hope this is helpful and it resolves the issue.