create a magnifying glass to read the different regions of an image

Basic setup to get something like this working..

- Add the image to 2 layers.. 1 small sized and 1 in the zoomed-in larger size.
- Use a clip-path to mask the bigger layer to a circle. Check https://bennettfeely.com/clippy/ Something like this will be the result
clip-path: circle(20% at 50% 50%);
- Then you need to ensure the upper layer.. the one with the clip-path moves/drags along when moving. I advice using GSAP Draggable for that.

Code pen sample here:
https://codepen.io/creme/pen/gOYrvxM

or this one...
https://malaman.github.io/js-image-zoom/example/basic.html

Solutions for this are plenty.
https://www.w3schools.com/howto/howto_js_image_zoom.asp

Hi Patrick! In case you haven't seen it, we recently upload an example by Paul Alders - Storyline: Room Exploration Interaction. He uses a magnifying glass to explore the different parts of the slide. You can download the file to look behind the scenes to see how it works. Hope that gives you more options! 

In Articulate Storyline 360, you can create a magnifying glass effect to zoom in on different regions of an image by using layers and triggers. Here are the steps to achieve this effect:

Import your image into Storyline by going to the "Insert" tab and selecting "Picture."
Adjust the size and position of the image on your slide as needed.

Create a new slide layer by clicking on the "Slide Layers" pane and then clicking the "New Layer" button.
Rename the layer to something like "Magnifying Glass."
Insert an image of a magnifying glass or any shape you want to use as your magnifier onto the "Magnifying Glass" layer. Position it where you want the zoomed area to appear.
Adjust the size of the magnifying glass image to your liking.

Create another slide layer for the zoomed area. Rename it accordingly.
On the zoomed layer, insert a rectangle or shape to cover the area you want to zoom in on. This will serve as the zoomed area.
Adjust the size and position of the shape to cover the desired region of the image.
Set the fill of the shape to be a cropped portion of your original image. To do this, right-click the shape, go to "Format Shape," choose "Fill," and then select "Picture or texture fill." Upload your image and adjust the positioning to display the desired region.

Go back to your base layer.
Create a trigger to show the "Magnifying Glass" layer when the timeline starts or when the learner clicks on something (e.g., a button or hotspot) that should activate the magnifying glass.
Create another trigger to show the zoomed layer when the learner hovers over or clicks on the magnifying glass.
Create a trigger to hide the "Magnifying Glass" layer when the learner moves away from the magnifying glass.
Create a trigger to hide the zoomed layer when the learner clicks on it or moves away from it.

Preview your slide to test the magnifying glass effect. The magnifying glass should appear when activated, and the zoomed area should display when the learner hovers over or clicks on it.
Adjust the timing and animations as needed to achieve the desired effect.
By following these steps, you can create a magnifying glass effect in Storyline 360 that allows learners to zoom in on different regions of an image without using the player functions.