Enlarge inventory widget's image on hover

Hello, I have created an order form with images of print cards that our staff can order for free.  I am wondering if I can link an inventory counter behind the scene so that we know what we have in stock.  I looked at your inventory widget but I can't figure out how to hover over the image so you can see it larger before placing my order.  Any help or ideas you can give is appreciated.  Thanks

You can simply use the inventory widget, then add custom CSS to enlarge the image by default or on hover.

Please see this sample form I've created:

https://form.jotform.com/92585962027971

By default, the inventory widget's image is like the one on Card 1, which I've added a CSS to enlarge when hovered. You can also set the image to be large on load like Card 2, or add a hover function to enlarge like Card 3.

Let us know which layout you would like to achieve so I can give you a step by step guide on the CSS. It would also be better if you already setup your form using the inventory widget, so that the custom CSS that I can give will already match your form.

Hi Vanessa, thank you for your help.   I have recreated the form in the inventory widget  and am ready for you to look at the custom CSS guide.  My new url is https://www.jotform.com/build/92744450065255. 

I checked your form and I am not able to see the images that you added.

Could you please confirm which layout you wish to have in those three? I would suggest you to clone the form shared by my colleague and grab the CSS code of any of the layout that you like from the widget custom CSS tab.

Once you copy the code of your choice, just go to your form and paste the same code that you copied.

Guides: How-to-Inject-CSS-Codes-to-Widgets

How-to-Clone-an-Existing-Form-from-a-URL

Hi, the images don't show up in Microsoft edge if that is what you are using.  I did the clone as you suggested but I cannot get the second line to accept two images - see below.  I will use the clone as the images are bigger if you can help me with the second line please.  https://www.jotform.com/build/92745600037252

I'm afraid that none of the images are showing:

Are these images stored on your domain? Since links are not accessible:

https://share.ahsnet.ca/teams/hr/RecognitionStrategies/RSPS/Photo%20Contest%20Library/Card%201.jpg

https://www.jotform.com/build/92745600037252

Does this help.  The images are showing up for me just fine.

Unfortunately, I am also not able to see the images on your form.

It is possible the you are seeing the images just fine due to the following reasons:

1. You are logged in in the same domain as the source image

2. You are on the same network where the source images are hosted

What I would suggest is either:

1. You or ask someone on your IT department to enable sharing of the images or make it public

2. Upload the images to Google Drive or Dropbox and use the shared link from there as the Product Image's source.

Hi, thank you for the suggestion, I will fix.

You are most welcome. Once you got the images showing, let us known if your need further assistance and we will be glad to help.