How To get the CID of two images on form?

  • Profile Image
    Advolink1
    Asked on March 13, 2018 at 07: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


  • Profile Image
    Kiran
    Answered on March 14, 2018 at 01: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.png


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


  • Profile Image
    Advolink1
    Answered on March 14, 2018 at 01: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


    15210050802018.03.13 Issue Response #1.j

  • Profile Image
    Kiran
    Answered on March 14, 2018 at 02: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.png

    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.