Create Hover state to zoom in and out

Jan 02, 2013

I need to: add a zoom in feature to the images/figures/photos/charts in the course? Is it possible to apply this globally or do you have to add that feature to individual graphics? Some images are easy to read in the frame but some could use that feature
Can you send me a sample file or explain how to create a Hover state when the object is moused over the image would zoom in and when mouse is removed from object the object would go back to normal size?
I'm new to Storyline and not that savy with all of the tools, tips and tricks. Any help would be appreciated.
Loran
8 Replies
Nick Hancock

A layer and hover trigger would work I think.

You could also try this and avoid extra layers...

add your enlarged image to the slide and set it's initial state as hidden. then create a trigger using the wizard on the small image  'Change State of..' 'enlarged image' to 'normal' when 'mouse hovered over' 'small image'.

Cheers,

Nick

Rebecca Fleisch Cordeiro

Hi Loran,

I'm attaching a file with 3 slides on it. I've not used layers, simply added the zoomed image to the hover state. This would work with layers, of course, I just wasn't sure if you need them, so thought I'd demonstrate without.

On the second slide I've added a fade in/out to get the image to zoom in/out more smoothly. I've taken advantage of Phil Mayor's workaround to get these to fade in/out. I've placed instructions on the slide.

For the third slide, I duplicated the slide and then right-clicked and used "change image" to swap the pictures out.

Alexander Kimball

Been a long time since anyone's been to this posting, but I have something specific I'm trying to do and some of the advice/help in here has worked pretty well so far.

Now I'm stuck. I can't put my overlays (buttons) on top of the zoomed in state of the image. I'm trying to setup a way to zoom in on one of four quadrants of the main map image so that the clickable areas are more easily clickable on a mobile device (smartphone) as that's where this application would be used the most.

Can anyone help out?

P.S. This is Storyline 360 FYI

Also, our account has changed. My name is Kyle.

Alyssa Gomez

Hi there, thanks for sharing your file! I took a peek inside, and I have a few suggestions.

First, you may want to consider a click-to-zoom rather than a hover-to-zoom since most people will be viewing your course on a mobile device, and mobile devices don't support hovering.

Also, try adding the zoomed image to a layer. The learner can click a portion of the map to open the layer, then they can click the button that appears over the zoomed area on that layer. 

I hope that sparks a few ideas for you!

This discussion is closed. You can start a new discussion or contact Articulate Support.