How to change images on hover from your online form?

How to change images on hover from your online form?

With some custom CSS codding you can change images on hover. This means that when a form visitor places the mouse over the image, that respective image can have a certain behavior, such as adding borders or having the image replaced with another one.

Whenever you want to add CSS to your online form, go to the SettingsThemes section of your form and hit the link Use custom CSS. You can either type or paste the code in the Code tab of the custom CSS lightbox or add the URL of your stylesheets in the URL tab.

123FormBuilder change images ></p>
<p>We will use the <b>Code</b> tab and manually type in the CSS code that will change the behavior of all images that are added to the form. You can add an image to the form with the help of the <b>Image</b> field. </p>
<p>To add borders of a particular color on all the images on mouse hover, for example, use the following code in the custom CSS lightbox:</p>
<pre>img:hover {border: 1px solid #FF1919;}  </pre>
<p>Here is a nice tweak for you! Changing images on hover with other images, each being changed with a different image. For example: placing an image with a coffee brand that changes to an image of a cup of coffee whenever someone hovers over the image. Or an image of a desk on sale which shows its discount on hover. </p>
<p>Here is a live example:</p>
<p style=

To do this, you’ll need to use the row ID. Each field contains this ID when dropped in the form. They are numbered depending on the order they have been added. If you have four fields on the form, they you will have row1,row2,row3 and row4. If the third field is an image field, then ID row3 is the one that you can use to apply a hover effect to that respective image on the form. But if that image field is placed behind the previous field, then it will respond to the ID row2.

Here is an example in CSS:

#row1:hover {content: url('//');}
#row2:hover {content: url('//');}
#row3:hover {content: url('//');}
#row4:hover {content: url('//');}

The example above is based on the idea that the image that shows on hover has the same size as the image you are hovering on. Also, if you put several images on the same line, their proportions are changed and you have to specify these changes in the CSS code. Use inspect element on the form to determine the size of each image on the form. Next, complete the code as follows:

#row1:hover {content: url('//'); width: 200px;}
#row2:hover {content: url('//'); width: 200px;}
#row3:hover {content: url('//'); width: 200px;}
#row4:hover {content: url('//'); width: 200px;}

Change the value of the width attribute with the one corresponding to the image on the form. If done correctly, your form should look as the live example above.

Notice that we have included also a shadow effect on the submit button. This can be achieved easily with the following CSS code:

#id123-button-send:hover {box-shadow: 5px 5px 2.5px #888888;}}

Did you know that you can convert radio buttons or checkboxes into clickable images on the form? Imagine if you apply hover effects on them, too. Read more in our documentation on how to insert clickable images in your form.

If you need assistance or have CSS tricks you want to share with us, contact us at or via our contact form.

Olivian Stoica
Olivian Stoica
Oli's enthusiasm for helping our fellow users led him to write thorough know-how articles and tutorials that would make form building a bliss on 123FormBuilder.

Leave a Reply

Your email address will not be published. Required fields are marked *