Okay
  Public Ticket #2847832
Use Grow in CSS animation for another images
Closed

Comments

  •  7
    Jabbarpour started the conversation
    August 12, 2021 at 3:10pm

    Hello

    We are using E&P From builder to create a special form.
    We have a lot of images in this form but their hovers style is normal and also we are using "Grow in" CSS animation for all the images that we have on the site.

    We searched a lot in CSS codes but could not apply this hover effect to the these photos.
    Is it possible for you to help us use this animation for these photos using CSS code?

    Thank you a lot

  •  1,878
    Judith replied
    August 12, 2021 at 3:57pm

    Hi There,

    Thanks for keeping in touch.

    Please send in your website url.

    Thanks.

  •  7
    Jabbarpour replied
    August 12, 2021 at 4:10pm

    Hi Judith,

    Here is the link:

    https://ad-harmony.com/kitchen-cabinet#order

    And this file that I attached shows the photos that we want to have that effect:

    Thanks.

  •  1,878
    Judith replied
    August 12, 2021 at 4:29pm

    Hi There,

    I am afraid we are not able to support on this scope, you may need to hire a developer to assist further.

    Thanks.

  •  7
    Jabbarpour replied
    August 12, 2021 at 4:35pm

    Hi There,

    Ok, Thank you

  •  7
    Jabbarpour replied
    August 13, 2021 at 11:34am

    Hi again,

    Sorry I opened this ticket again.

    I added a hover zoom effect for the images but I don't know how or where to add "overflow: hidden;" to prevent the image from enlarging and only have the zoom mode (Sorry if my English is not good! I hope you understand what I mean)

    here:

    https://ad-harmony.com/kitchen-cabinet#order

    Could you please help us to fix it?

    I don't know where to ask my question and I can only ask you for help

  •  8,845
    Tahir replied
    August 13, 2021 at 4:21pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .ezfc-element-radio {
    display: block;
    overflow: hidden;
}

    Thanks

    ThemeNectar Support Team 

  •  1,878
    Judith replied
    August 13, 2021 at 4:21pm

    Hi There,

    Please try this css:

    img.ezfc-element-option-image.ezfc-element-radio-image:hover {
        transform: scale(1.0);
    }

    Thanks.

  •  7
    Jabbarpour replied
    August 13, 2021 at 5:10pm

    Thanks a lot

    It worked very well :)

    You are the best