As Daniel’s suggestion states … “your scene would have to be structured differently” but what if there was a way that didn’t have to involve setting your document to be responsive! Wouldn’t that be good!
What you need to do is create a function that runs on mouse click of the image that does the following:
var popup = hypeDocument.getElementById('popup'); // you element that houses the larger image
popup.height = hypeDocument.getElementProperty(popup, 'height'); // same element's height
// timeline to run when image is clicked. Here I have a timeline that moves the "popup" into place
// The following code sets the popup to always be in the center of the browser window (height wise)
hypeDocument.setElementProperty(popup, 'top', document.scrollingElement.scrollTop + ((window.innerHeight / 2) - (popup.height / 2)))
// this code gets the background image of the clicked element so we can use the same reference for the popup bg element.
file = hypeDocument.getElementProperty(element, 'background-image');
// final piece is to set the bg element (a rect inside the popup group) to change it's background image to that of the "file" reference above
bg = hypeDocument.getElementById('bg');
bg.innerHTML = '<img src="' + file + '" width="100%" height="100%">';
// Hype's new setter for background-image could possibly be used here as well
// unfortunately there is a possible bug that needs to be addressed first
galleryPopup-v2.hype.zip (477.8 KB)