When enlarging a product picture, it appears wrong on site

I have posted an almost simular post before, but it didn`t solve my problem, so I would like to give it another try, I hope that is ok.

My problem is that when I enlarge a product picture, it will come up in the middle of the form, which makes it a problem when you click a picture in top or bottom of the form (since my form is very long). Anyway I can get the picture to enlarge at the place I´m at in the form, instead of in the middle ?

Alternative could I maybe discard this function, and instead make it so, that picture is enlarged when hovering the mouse over it ?

I know I can solve the problem by making the form smaller in height, but I would like that the user doesn`t have to scroll in the form.

It is possible to change its size on hover state. That's the only way to overcome it for now.

Here's how:

1. First, you need to disable the product image preview in the payment field settings.

a. Click the payment field in your form > click the wand icon to open its payment settings > additional gateway settings

b. Set clickable image preview to NO

2. Inject this CSS codes to your form to enlarge the image on hover state.

.form-product-item:hover img {

    height: auto;

    width: 50%;

    position: absolute;

    top:70px;

    z-index:1;

}

.form-product-item:hover{

    padding-left:68px;

}

.form-product-item{

    box-sizing:border-box;

}

Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Example

I´ve tried to embeed your CSS code to my form, and set image preview to "no", but it doesn´t seem to work, it is like the picture is hidden somehow in the back of the form when you hover over it, can you please help me out with that problem ?

When I do so, how will it appear and work on phone ?

This is the form I´ve been changing in :

 https://eu.jotform.com/build/73326246243352

Page on which it is active :

https://sparmad.com/faerdigretter/

Please check my demo form: https://form.jotform.com/73426436928970

Is that what you're trying to achieve? If yes, please add this custom CSS code to your form:

.form-product-item:hover img {

height: auto !important;

width: auto !important;

position: initial !important;

}

To add the custom CSS code, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Here's the demo form in action:

I hope this helps. Contact us again if you need further assistance.

Yes that is almost what I´m trying to achieve, only problem with this, is that I would like for it only to enlarge when you hover over the picture, not when over the text, since it makes the scroll a bit confusing, when enlarging everything on the way, is that possible ?

Sorry but I could not find a workaround with that functionality. We can only enlarge the image itself on hover state.

Our solutions are the closest one you could get. Unfortunately, in my CSS codes, I missed a piece of CSS code that's why the image is cut off during hover. 

You can correct it by replacing with the following CSS codes.

.form-product-item:hover img { height: auto; width: 50%; position: absolute; top:70px; z-index:1; } .form-product-item:hover{ padding-left:68px; } .form-product-item{ box-sizing:border-box; }.form-product-item {overflow: visible;}