Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 5, 2023 at 8:46 pm #1377756
    nV15OoBtg21iTn5z

    I had a previous issue with image overlay sizing here: https://kriesi.at/support/topic/image-overlay-position-for-resized-thumbnails/

    And it was fixed with the following code:

    .avia_transform a .image-overlay {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

    On a different page with an image carousel, the image overlay is not covering the entire image.

    How can I modify the existing CSS edit above or add another custom CSS to fix this other overlay issue?

    January 6, 2023 at 5:12 am #1377789
    Ismael

    Hey nV15OoBtg21iTn5z,

    Thank you for the update.

    The overlay is set to have a maximum height of 60% relative to the parent container. To override this, please replace the previous modification with the following css code.

    .avia_transform a .image-overlay {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    max-height: 100% !important;
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    January 6, 2023 at 3:19 pm #1377866
    nV15OoBtg21iTn5z

    Worked perfectly. Thank you!

    January 6, 2023 at 4:19 pm #1377871
    Yigit

    Hi,

    Glad Ismael could help! Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Image Overlay’ is closed to new replies.