Add fading effect on image checkboxes and image radio

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

Thanks!

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!

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

Thanks!

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

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.

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!

Hi Shadae,

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

Cheers!

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!

Thanks Ashwin!

I will keep an eye open.

Ashwin, Jan,

Any luck on getting this to work?

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.

Thanks Jan,

I will keep an eye out :)

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!

Works perfect!

Thanks a ton Jan :)

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!