Online Order Form Images to increase size when hover

I am trying to make an online order from for a fundraiser. I would like my customers to see the question and when they select an option in the drop down i would like them to either see the name of the item and when hover over it see the photo of the item, or see the item instead of name and hover over to see a bigger photo of that item.

We can use custom CSS to increase the image size.

To clarify, do you want to add your image manually or you would like to use the product list option?

https://www.jotform.com/blog/introducing-product-list-form-field/

Looking forward for your response.

I would like to add my image manually.
It is a png that is saved on my computer.
Essentially i would like a drop down to look like this

List contains a name and once you hover over that specific name it would
show you a photo.
This pic is just an example showing a drop down
Thanks,
Valerie
...

Hi Valerie, thank you for getting back to us.

Unfortunately, that is currently not possible to achieve your requirement. Have you checked our "Image Checkboxes" widget already? Please take a look at our "Image Checkboxes" widget and see if that fits your requirement.

Let us know if you have further questions.

Yes, and I do not have a url for the photos I’m needing to use. They are
photos saves on my computer. Sorry very new to all of this form making. Do
you guys have an online chat option for someone to help walk me thru the
process?
...

Hello @vlrdietrich

Unfortunately, we do not provide live chat support.

Feel free to post any questions or concerns here, and we will be happy to help. Our team is available 24/7 and replies promptly.

I have cloned your form 203412991920150 and made some adjustments, including Custom CSS and Conditional Logic to fit what might be your demand.

Guide: How-to-Inject-Custom-CSS-Codes

Guide: Smart-forms:-conditional-logic-for-online-forms

Give it a check and tell us if this is what you're looking for:

https://form.jotform.com/203413674104951

Note that you can clone back this and continue building from it:

Guide: How-to-clone-an-existing-form-from-a-url

Looking forward to your reply.

i am not familiar with how to use css codes. do you offer support via chat?
Thanks,
Valerie
...

Hello @vlrdietrich

Unfortunately, we do not provide live chat support. Feel free to post any questions or concerns here, and we will be happy to help. Our team is available 24/7 and replies promptly.

Does the form I've pointed to above fulfills your needs?

Form: https://form.jotform.com/203413674104951

If so, you should either clone the form or build it based on your own form by following these steps:

1 - Add regular image fields for your products.

2 - Hide the images' fields.

Guide: How-to-hide-form-fields

3 - Create conditional logic rules making each of your dropdown field's options show the corresponding product image.

Guide: how-to-show-or-hide-fields-base-on-user-s-answer

4 - Add this custom CSS code to make your images enlarge on hover:

li[data-type="control_image"] img:hover {
   width: 300px;
   height: auto;
   z-index: 2000 !important;
}

Guide: How-to-Inject-Custom-CSS-Codes

Let us know if you need any further assistance.

After SEVERAL SEVERAL template trials I found one that will do what i need
to do. I am using Color Street Stock- Product List. Please please tell me I
can change things in the template. I need to know how to change population
options from presets. I need to be able to add own color options
Thanks,
Valerie
...

Sorry last email was sent to quickly. I need to know how to change the
things listed in the populate options from presets. Example right now it is
color, t shirt size print size, etc. I would like to change those heading
titles and be abe to list my options accruing to my choices
Thanks,
Valerie
...

Hi Valerie,

You can set it to none, so you can add your own custom options.

I hope this helps. Let us know if you have further questions.