How To get the CID of two images on form?

  • zoiglobal
    Asked on March 13, 2018 at 7:39 PM

    Hello!  

    Can you please help me find the CID of 2 images in the attached screenshot that are flickering because of CSS I have on the whole form causing them to try to enlarge:

    li[data-type="control_image"] img:hover {

        transform: scale(2.75);


        transition: all 1s ease-in-out;

        position: relative;

        z-index: 1;

        display: inline-block;

        top : 120px;

    }.

    In the past, if you look at my CSS in Form Designer (CSS), I have been able to control some of the image widgets to not have them transform and enlarge.  However, the 2 images identified by the red arrows in my screenshot, don't seem to have a number that I can use to set the CID.

    Thank you in advance for your help.

    Denise


    Jotform Thread 1414226 Screenshot
  • Kiran Support Team Lead
    Replied on March 14, 2018 at 1:06 AM

    Are you referring to the div IDs for the image fields? If so, they are cid_351 and cid_352. Please see the screenshot below from the browser inspector window.

    1521003931Selection 079 Screenshot 10


    If you are referring to something different, please let us know. We will be happy to help.


  • zoiglobal
    Replied on March 14, 2018 at 1:24 AM

    Thank you, Kiran!  Yes, that is what I'm talking about.  However, when I add the appropriate CSS, I still end up with the images shaking.  

    Can you tell me where I am incorrect, please?

    Denise


    How To get the CID of two images on form? Image 10

  • Kiran Support Team Lead
    Replied on March 14, 2018 at 2:58 AM

    It looks like top : 120px; in the CSS code to enlarge the image is causing the issue. As I tried to comment out this part, the images are not shaking when the mouse pointer is hovered.

    1521010485Selection 082 Screenshot 10

    If you do not want the transition for these buttons, please try changing the code as provided below:

    #cid_351  img {

        display: block!important;

        transform: none!important;

        position: static!important;

    }

    #cid_352 img {

        display: block!important;

        transform: none!important;

        position: static!important;


    }

    Hope this information helps. Let us know if you need any further assistance. We will be happy to help.