-
zoiglobalAsked 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
Page URL: https://form.jotform.com/80684021452148 -
Kiran Support Team LeadReplied 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.
If you are referring to something different, please let us know. We will be happy to help.
-
zoiglobalReplied 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
-
Kiran Support Team LeadReplied 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.
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.