How Can I Zoom My Images When Hovered?

  • Profile Image
    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.
  • Profile Image
    Sean
    Answered on February 13, 2015 at 01: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!

  • Profile Image
    pandalabs
    Answered on February 14, 2015 at 06: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.

  • Profile Image
    Sean
    Answered on February 14, 2015 at 08:25 AM

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



    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!