Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1024398

    I am a adding a “multiply” blend mode to the image caption color overlay and it works great, other than it is applying the blend mode to my white
    caption text- making it hard to read. Is there a way to make this blend mode not include this caption text? which i think is inside: av-image-caption-overlay-center
    I think since the caption text is nested in .av-image-caption-overlay that it applies the blend to everything. I just need to find a work around.
    Here is what i am using to target the overlay on hover:

    .av-overlay-on-hover .av-image-caption-overlay {
        mix-blend-mode: multiply;

    thanks for an suggestions or workarounds!

    #1024964

    Hey jomo5280,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1024973

    I have the effect applied to the top right image – and you can see how the text is effected by this blend mode as well, making it hard to read: av-overlay-on-hover .av-image-caption-overlay
    I need it so the white caption text is not effected by the blend mode and stays white – does that make sense?
    thanks!

    • This reply was modified 1 year, 11 months ago by  jomo5280.
    #1025756

    Ok, i have resolved this issue as well – had to edit image.php to get the caption out of the parent Div.

    //$overlay = "<div class='av-image-caption-overlay'>{$overlay_bg}<div class='av-image-caption-overlay-position'><div class='av-image-caption-overlay-center' {$style}>{$content}</div></div></div>";
    							$overlay = "<div class='av-image-caption-overlay-center' {$style}>{$content}</div><div class='av-image-caption-overlay'>{$overlay_bg}<div class='av-image-caption-overlay-position'></div></div>";

    and add this to custom.css:

    .av-overlay-on-hover .av-image-caption-overlay-center{opacity: 0; filter:alpha(opacity=00); }
    .av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay-center{opacity: 1; filter:alpha(opacity=100);}
    • This reply was modified 1 year, 11 months ago by  jomo5280.
    #1025926

    Hi jomo5280,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.