How Can I Zoom My Images When Hovered?

  • pandalabs
    Asked on February 13, 2015 at 11:41 AM
    2. Is there a possibility to zoom in on the images once the user hovers on them? Alternatively, I tried using the Lightbox widget but for some reason it doesn't work.
  • Sean
    Replied on February 13, 2015 at 1:10 PM

    Our Product Lightbox widget would be the correct tool to use but it is not triggered by hover but actually by clicking. It will allow your users to get a display of the image at a larger size once the image has been clicked.

    I was not able to locate any widget that would provide the zoom feature for hovering but you can the inject the CSS codes below and it should provide a similar functionality.

    .form-product-image:hover, .form-product-image-with-options:hover {
    height: 500px;

    width: 600px;
    }

    Feel free to provide the link for your form so we can provide more accurate CSS codes to help out. I hope this answers your question.

    Cheers!

  • pandalabs
    Replied on February 14, 2015 at 6:06 AM

    Thank you for the reply, but for some reason the product lightbox widget doesn't work. I've tried deleting it and re-adding it a few times but still doesn't work.

  • Sean
    Replied on February 14, 2015 at 8:25 AM

    Can you try activating the light box widget on this demo form:
    http://form.jotform.co/form/33604136500846?

    How Can I Zoom My Images When Hovered? Image 1 Screenshot 20

    When you say that it is not functional, are you viewing it on the standalone URL or are you viewing it from your website? If you are viewing it from your website, it is possible that the other scripts for your website would be interfering with scripts to trigger the product image light box. I would recommend the iFrame method to get rid of this issue. Please try triggering the product light box functionality by clicking the images on the form at the above link. I will await your response.


    Cheers!