A couple of questions

1

Dear All
How to make an element visible when hovering over a rectangle?

How to Zoom an Image with the Mouse?

Thanks in advance
Massimiliano

2

There are many ways to accomplish this. I'd probably use an alternate timeline that plays forward on mouse over to reveal the element, and backwards on mouse out to hide it. The basic steps would be:

  1. Select your rectangle element
  2. Go to the Actions Inspector
  3. Click the plus near "On Mouse Over"
  4. Set the action to "Continue Timeline…"
  5. Set the timeline to "New Timeline…" and then name and create your timeline. This timeline will now be selected (see its name on top of the element list).
  6. Select the Element you want to fade in. Set its opacity to 0% (if you want a smooth effect) or display setting to hidden (if you want it immediate and to not be clickable while hidden).
  7. Now go ahead and hit record, move the playhead by some amount (either one frame or the amount you want it to fade in over).
  8. Change the element's opacity to 100% or the display value to visible to make the animation.
  9. Hit record again to stop recording.
  10. Select your rectangle element again.
  11. Go back to the Actions Inspector
  12. Click the plus near "On Mouse Out"
  13. Set the action to "Continue Timeline…" with the same timeline you were using, but this time check "play in reverse"
  14. (optionally) change your selected timeline back to whatever you had before, likely the main timeline.

Can you elaborate on the exact type of effect you are going for? What do you want the interaction with the mouse to be? Is there an example?

3

Hi Jonathan
I have a large image as a background that is a wall with paintings, passing the mouse over a painting should appear a small technical sheet.

Rotating the mouse wheel should enlarge the entire image to be able to see a painting better.

I have to create a digital exhibition.

Thanks in advance
Massimiliano

4

Gotchya.

This can't currently be done with built-in features of Hype, but can be accomplished using a bit of JavaScript to generally hook into scroll or mouse wheel events and then using the Hype API to manipulate a timeline that would do your zooming in.

Paging @MaxZieb -- would HypeScrollMagic be a good way to accomplish this?

1 Like