Show pop up with enlarged picture


When respondents have to select images, they should be able to “zoom” an image to look at it more closely. Example: clicking a glass-symbol in the corner of an image brings a pop-up with an enlarged copy of the image, clicking an “X” in the upper right corner of this pop-up will close it. (This is the way some research institutes are doing this job).

How to do that?

strasser90 answered

    SurveyGizmo offer some workaround options for implementing hover over capability:

    I know this is not quite what you are looking for, but what you are looking for would likely involve a bit of custom implementation with the use of HTML and likely CSS as well. There is not a built in feature for this in SurveyGizmo, but if you have developers/designers on your team, it should be possible with some customization.

    I hope this helps clarify!

    Dominic Sharpe answered

      Hi Strasser,

      I would also recommend looking into Javascript/Jquery Lightboxes. There are a ton of different options available out there.

      You can find a ton of great open source options by searching google.

      Jacob H (Moderator) answered

        Thank you for your tips!

        Finally, I have found an easy solution I’d like to share with you:

        1. Add an id to the picture (example: <img id=”zoomable” src=… />)
        2. Add CSS for the id, either in the “Style” tab or directly in the source code of the question (with <style>…</style>).
        3. In this CSS, set a size for the normal picture; example: #zoomable {height:30vh}
        4. Set a size for the hovered picture; example: #zoomable:hover {height:70vh} 

        Now, the picture will enlarge every time the mouse is hovering over it.

        strasser90 answered


          Question stats

          • Active
          • Views12337 times
          • Answers3 answers
          • Followers1 follower