Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #968153

    I use both “slightly increase image” and caption with overlay. The image increases in width and becomes wider than the overlay.

    Is this a bug or normal behaviour? How to fix it?

    Many thanks! :)

    #970195

    Anyone can help me with this, please? I can’t find the answer in the forum.
    Thanks in advance.

    #970443

    Hi Steve,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .av-caption-image-overlay-bg {
        min-height: 190px;
        min-width: 200px;
        left: -10px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #970575

    Thank you, Victoria. This works, but not quite what I was after. This increases the overlay, to match the size of the enlarged image.

    The image increases in width, which breaks the look I’m after. Is there a way to make the image increase inside of the 180×180. Or else, (even better) to make it uniformly increase in height as it increases in width?

    Many thanks in advance!

    • This reply was modified 3 years, 5 months ago by  Steve.
    #971514

    Hi,

    The image increases in width, which breaks the look I’m after.

    The option “slightly increase image” does that which is what was set in the first place. Please try this css code to limit the width of the image container.

    .av-hover-grow {
        max-width: 180px;
        max-height: 180px;
    }

    You may need to apply a unique css class attribute to those images because this modification will affect every image element in the site.

    // https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    #972062

    Thanks for this! :)
    So, I’d use
    my-unique-css-class {
    max-width: 180px;
    max-height: 180px;
    }
    Or do I need to ad anything else? Not sure how to use css corretly with the css classes.
    Thanks :)

    #972617

    Hi Steve,

    A class always has a dot in front of it, so in your case it would look like this:

    .my-unique-css-class {
    max-width: 180px;
    max-height: 180px;
    }

    Best regards,
    Rikard

    #972626

    Thank you to the awesome E team! :)

    This is resolved.

    #972880

    Hi,

    Great, glad we could help :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Image mouseover overlay is smaller than the image’ is closed to new replies.