-
Posts
-
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!
Hey jomo5280,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaI 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!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);}
- You must be logged in to reply to this topic.