I would like to create an effect where if someone hovers over a certain section of the page, the image changes
For example: a full screen image of a hall with a phone booth, when they hover over the phone booth the image changes to another with a spotlight on the phone booth.
Is this possible and where can i find the documentation/tutorials to create this effect?
Thank you for getting in touch with us. My name is George and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
Unfortunately, there is no option to create a hover effect for only a part of an image. You can add a hover effect for any layer but the transitions will apply for that layer only. But you can do something like this: you can create two image layers, the bottom should be the "hovered" version and the top sholud be the normal. Now, you can add a hover transition for the top layer which will fade out on hover, letting the bottom layer to show.
Thanks for getting back to me. That sounds like a possible option, could you send me some link/document where I can see exactly how to set up that hover transition for the top layer? And can i do that multiple times on the same page? Say having various 'bottom' layers that are triggered when hovering over different top layer sections?
It is very easy: create a new image layer, set the size and position. It will be the "bottom" layer. Then, duplicate this layer and change the image to another (this will be the "top" layer). Right now, the top layer is selected. Now go to the transition selector, select Hover Transition and enable it with the little switch. Now scroll down and set the opacity to 0 (zero). If you preview the slide and move your mouse over the top image layer, it will fade out and reveal the bottom layer.
You can add more layer-pairs to your slide, but keep in mind, that if the layers overlap each other, only the topmost visible layer's hover transition will be animated.
Hello,
I would like to create an effect where if someone hovers over a certain section of the page, the image changes
For example: a full screen image of a hall with a phone booth, when they hover over the phone booth the image changes to another with a spotlight on the phone booth.
Is this possible and where can i find the documentation/tutorials to create this effect?
Hello Perry,
Thank you for getting in touch with us. My name is George and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
Unfortunately, there is no option to create a hover effect for only a part of an image. You can add a hover effect for any layer but the transitions will apply for that layer only. But you can do something like this: you can create two image layers, the bottom should be the "hovered" version and the top sholud be the normal. Now, you can add a hover transition for the top layer which will fade out on hover, letting the bottom layer to show.
Best Regards,
George | Kreatura Dev Team
Hello George,
Thanks for getting back to me. That sounds like a possible option, could you send me some link/document where I can see exactly how to set up that hover transition for the top layer? And can i do that multiple times on the same page? Say having various 'bottom' layers that are triggered when hovering over different top layer sections?
Hello Perry,
It is very easy: create a new image layer, set the size and position. It will be the "bottom" layer. Then, duplicate this layer and change the image to another (this will be the "top" layer). Right now, the top layer is selected. Now go to the transition selector, select Hover Transition and enable it with the little switch. Now scroll down and set the opacity to 0 (zero). If you preview the slide and move your mouse over the top image layer, it will fade out and reveal the bottom layer.
You can add more layer-pairs to your slide, but keep in mind, that if the layers overlap each other, only the topmost visible layer's hover transition will be animated.
Attached files: layer-transition-selector.png
Best Regards,
George | Kreatura Dev Team