How to enlarge image on mouse hover?

  • boothcovers
    Asked on September 10, 2017 at 4:24 PM

    Hi,

     

    How do a make a image pop up to be larger on the Jotform?

  • Mike
    Replied on September 10, 2017 at 4:41 PM

    Thank you for contacting us.

    The image size can be increased via the field properties.

    How to enlarge image on mouse hover? Image 1 Screenshot 20

    If you are referring to something else, please kindly provide us with more details.

  • boothcovers
    Replied on September 10, 2017 at 5:43 PM
    Hi,
    If you click on the image will it popup and get larger? Im men a life form when a customer is filing out the order form and they click on an image will it go larger?
    ...
  • David JotForm Support Manager
    Replied on September 10, 2017 at 6:17 PM

    You can accomplish this through a hover effect, please try injecting the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #cid_24 img:hover {

    width:600px !important;

    height:auto !important;

    }

    Result: https://form.jotformpro.com/72527457680969 

    How to enlarge image on mouse hover? Image 1 Screenshot 20

    Let us know if you need more help.

  • boothcovers
    Replied on September 10, 2017 at 7:43 PM
    I tried this no luck
    Can you look at this for me? Cam you insert the code?
    ...
  • boothcovers
    Replied on September 10, 2017 at 7:43 PM
    See the form?
    http://editor.wix.com/html/editor/web/renderer/edit/80a9f3fc-1a68-4f6a-9618-647d33b7b6b2?metaSiteId=816b9aad-e7ae-49c3-8899-fa150e46c68b&editorSessionId=1E6C60FF-96D1-41BE-9B43-A4777D7CB542
    ...
  • Ashwin JotForm Support
    Replied on September 11, 2017 at 12:12 AM

    I did check the form with its direct and image seems to display correctly on mouse hover. Please check the screenshot below:

    How to enlarge image on mouse hover? Image 1 Screenshot 20

    I am unable to check your webpage as it seems to be asking for login credentials. It seems you have shared the edit URL of wix. I would suggest you to please share the webpage URL where you have embedded your form and we will take a look.

    We will wait for your response.

  • boothcovers
    Replied on September 11, 2017 at 9:43 AM
    Do you have insert the code for each image in each section?
    ...
  • boothcovers
    Replied on September 11, 2017 at 9:43 AM
    Please look at the second image "Choose a vinyl color"
    It will not enlarge on the preview. I need all images to popup
    Thank you
    ...
  • Ashwin JotForm Support
    Replied on September 11, 2017 at 11:04 AM

    If you want to add zoom effect in all image field of your form, please inject the following  custom css code in form:

    .form-image:hover {

        width: 600px !important;

        height: auto !important;

    }

    The following guide should help you how to inject custom css code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • boothcovers
    Replied on September 12, 2017 at 12:43 PM
    Please look at this form
    https://boothcovers.com/vinyl-fabric-quote/
    The color image is getting smaller not larger. it also seems like a glitch in the form,
    Thank you
    ...
  • David JotForm Support Manager
    Replied on September 12, 2017 at 12:57 PM

    It seems to get smaller as it's default width is bigger than the one injected in the hover effect. Simply reduce the default width of that image: https://form.jotformpro.com/72545634680966 

    How to enlarge image on mouse hover? Image 1 Screenshot 20