Hover Function in Layers
Jul 19, 2023
Hello,
I am attempting to have a hover function in a layer with the end goal being an image appears larger when hovered over. I have tried a few different methods, but none of them work.
1. Add hover state, Issue: Enlarged image will only appear behind other images, need image to be in front of all other images on screen
2. Add layer, include trigger that shows layer with enlarged image when image is hovered over, Issue: Layer with all images is hidden when hovering away (I think this is because it is a layer on a layer).
3. Add layer, include trigger that shows layer with enlarged image when original image is clicked, Issue: Layer with all images is hidden when clicking off of enlarged image. I need the user to return to layer with all images when clicking/hovering away.
Any help with any of these options or any other ideas would be much appreciated. Thanks.
2 Replies
I think I would use lightboxes instead of layers. A lightbox gives you more control over what the learner can do and see. A lightbox is a slide attached to the project by a trigger that opens the lightbox instead of a layer. Looking at what you are building, I think they will work better for you.
Let me know if you need help.
Good luck
Some solutions to your listed issues:
1. Move the image to the front (Click arrange, move to front or drag to top of timeline). The state will always appear at the same Z-level as the original, but if it isn't in front of or behind another object, you won't notice until the state shows with the enlarged image. I'm guessing the problem is with the layer with the 4 equal-sized objects, and you want to enlarge all of them. If I'm right, and you want to enlarge each of them to cover the entire slide, you can't do that with states. One object will be on top, and even when it is in collapsed state, it will still be on top of the others. When they are all equal sizes, that won't matter. When one of the lower objects changes to the enlarged state, part of that state will be below the top object, etc.
2. and 3. are the same issue. I'm guessing the issue is that when layer 3 - copy is shown with either a hover or click it doesn't return to layer 3. Am I right? If so, the problem is that 3 - copy is still set to the default property of hiding other layers, so it hides layer 3 when shown. Deselect that property, and when 3 - copy is hidden, layer 3 will still show. See the attached sample to see the results of making this change.
Other ideas:
4. I think it is a bad idea to have the navigation sometimes on the side, sometimes on the bottom, and sometimes half-hidden. I moved some of the objects on the layers so the buttons on the base always show. They can always be seen, and their triggers will do all the work, without duplication on each layer.
5. Is it "pincushion disortion", or "pincushion distortion"?
6. There are a lot of extraneous objects on the layers. I tried to find them and make them invisible, but they should be deleted, so as not to clutter up the project.
7. I will say that the animations work well and look good.