What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Add fading effect on image checkboxes and image radio

    Asked by art_crate on January 30, 2015 at 03:12 AM

    Is there anyway to crossfade in a selected image in a image radio and image checkbox? This would be a really nice touch and add another level of engagement.

     

    Thanks!

    Page URL:
    http://form.jotformpro.com/form/50117521538954?

    image radio crossfade fading effect transition css image checkboxes
  • Profile Image
    JotForm Support

    Answered by Jan on January 30, 2015 at 10:22 AM

    Hi there,

    I checked your form and it shows that the image radio and image checkbox are cross fading once you selected it.

    Is this what you're referring to? If not, then let us know on how you wanted it to work.

    Thank you!

  • Profile Image

    Answered by art_crate on January 31, 2015 at 03:36 PM

    I am looking for a crossfade to add a nice transition when the image is selected.

     

    See second image here: http://css3.bradshawenterprises.com/cfimg/


    Example of nice movement I am trying to achieve: https://www.trunkclub.com/my/signup/work-style

     

    I know this is another question, but

    is it possible to make a selection and it takes you to the next page? If so how could a user move forward and backwards through the survey?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Jan on January 31, 2015 at 06:37 PM

    Hi,

    I understand now. You need to select what kind of effect would you like to use. Choose between 1 and 2.

    Option 1. From original image to low opacity when hovered

    li img.default:hover {opacity: 0.3 !important;}

     

    Option 2. From low opacity to original image when hovered

    li img.default {opacity: 0.5 !important;}

    li img.default:hover {opacity: 1 !important;}

     

    If you want to apply a fading transition effect when the image is hovered then you need to add these css codes as well.

    li img {

    left: 0 !important;

    opacity: 1 !important;

    -webkit-transition: opacity 1s ease-in-out !important;

    -moz-transition: opacity 1s ease-in-out !important;

    -o-transition: opacity 1s ease-in-out !important;

    -ms-transition: opacity 1s ease-in-out !important;    

    transition: opacity 1s ease-in-out !important;

    }

    Here's the demo, please take a look at it.

    You need to inject these codes in the actual widget. Here's a guide on how to do it. There are 2 ways.

    or

     

    Hope this helps. Thank you!

    -Jan

  • Profile Image
    JotForm Support

    Answered by Jan on January 31, 2015 at 06:40 PM

    I need to create another thread for your other question. 

    This is the URL of the new thread: http://www.jotform.com/answers/507382

    Thank you for understanding.

  • Profile Image

    Answered by art_crate on February 01, 2015 at 12:04 AM

    Hi Jan,

     

    Thank you for your help. I tried using option one, but cannot seem to get it to work correctly by injecting the code into the widgets css.

     

    Have a look at my screenshot.

     

     

    Thanks!

     

  • Profile Image

    Answered by Shadae on February 01, 2015 at 10:50 AM

    Hi art_crate,

    After reviewing your form, I am not currently seeing the CSS code added to your widget. Can you please apply the CSS code and select "Finish".

    Please inform us once it is applied and we can take a look to better assist you.

    Thank you.

  • Profile Image

    Answered by art_crate on February 02, 2015 at 10:17 PM

    Hi Shadae,

     

    Please have a look at my screenshot. Css has been inputted and I cannot get it to work. Please advise.

     

    Cheers!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 03, 2015 at 09:04 AM

    Hello art_crate,

    I did check your form and it seems you have injected the css code in widget correctly but for some reason it is not being applied to the widget. 

    Let me check and get back to you a little later on this.

    Thank you!

  • Profile Image

    Answered by art_crate on February 03, 2015 at 03:06 PM

    Thanks Ashwin!

    I will keep an eye open.

  • Profile Image

    Answered by art_crate on February 09, 2015 at 02:41 AM

    Ashwin, Jan,

     

    Any luck on getting this to work?

  • Profile Image
    JotForm Support

    Answered by Jan on February 09, 2015 at 12:47 PM

    Hi,

    Sorry art_crate but the CSS code that I provided only works for image checkboxes and not image radio. I will check if we can do the same thing in image radio. I will update you once I found a solution.

    Thank you.

  • Profile Image

    Answered by art_crate on February 10, 2015 at 01:45 AM

    Thanks Jan,

    I will keep an eye out :)

  • Profile Image
    JotForm Support

    Answered by Jan on February 10, 2015 at 02:41 AM

    Hi,

    This is the custom css code for the image radio.

    Option 1. From original image to low opacity when hovered

    li div.default:hover {opacity: 0.3 !important;}

     

    Option 2. From low opacity to original image when hovered

    li div.default {opacity: 0.5 !important;}

    li div.default:hover {opacity: 1 !important;}

     

    If you want to apply a fading transition effect when the image is hovered then you need to add these css codes as well.

    li div {

    left: 0 !important;

    opacity: 1 !important;

    -webkit-transition: opacity 1s ease-in-out !important;

    -moz-transition: opacity 1s ease-in-out !important;

    -o-transition: opacity 1s ease-in-out !important;

    -ms-transition: opacity 1s ease-in-out !important;    

    transition: opacity 1s ease-in-out !important;

    }

    Add the code in the css widget just like what you did. Just be careful where to put the code, make sure that it is for image radio and the other is for image checkboxes.

    Hope this works. Thank you!

  • Profile Image

    Answered by art_crate on February 10, 2015 at 01:31 PM

    Works perfect!

    Thanks a ton Jan :)

  • Profile Image
    JotForm Support

    Answered by Kiran on February 10, 2015 at 02:12 PM

    On behalf of my colleague, you are welcome. We are glad to see that the issue is resolved for you. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!