Canvas Support

Slider Caption - Caption brightness changes when image brightness changes

7 replies · opened Sep 6, 2020

AalhimlerSep 6, 2020

I'm trying to make our slider image brightness a bit darker so that white caption text will display better. When applying filter: brightness(75%) to the image, it affects the caption text as well. I'm guessing that the caption text is included as part of the image before the brightness is applied (Swiper-wrapper > swiper-slide > slider-caption). Is there a way that we can keep the brightness of the caption text at 100% or dim the image without effecting the brightness of the caption text?

Thanks,

Al

SSemicolon WebSTAFFSep 7, 2020

Apologies about the Inconveniences!

However, we are not sure if this is really related to the Codes within the Template but rather due to Customizations. The Text Brightness is never changed. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this.

Thanks for your Patience.

AalhimlerSep 7, 2020

The URL to see this is: http://dev.thundercloudlabs.com . When you view the page you can see that the image brightness is lowered to 60% in the style.css page, but in doing so it is making the caption text dimmer as well. --Al

SSemicolon WebSTAFFSep 8, 2020

The CSS you are using is incorrectly configured. You are applying the CSS to the .swiper-slide Element which affects the Entire Slide including Texts.

Also, you are using a Very Old Version of Canvas which currently does not support this while you can easily apply this CSS in the Latest Versions of Canvas. In your Version, you can consider using the following code:
[ch_pre]








[/ch_pre]

and change the background-color Value in the .video-overlay Element to dim the brightness of the Image without affecting the Text.

This will definitely work fine. Hope this Helps!

AalhimlerSep 10, 2020

Made the changes that you recommended and it is a dramatic improvement. There is still one side-affect of the changes though: the background image seems to only have the brightness applied to the middle 70% or so of the image. On either side of each of each image on the swiper-slide, the brightness changes so that it looks like a middle rectangle of the image is one brightness and on either side it is a different brightness. Is there a way that we can make the brightness uniform so that the whole image is like the middle? The updates are posted on the same website for you to see: http://dev.thundercloudlabs.com Thanks --Al

SSemicolon WebSTAFFSep 11, 2020

Hello,

The Codes you are using are incorrect and not the ones we have provided you with. To ensure this works fine, make sure that you use the codes exactly the ones we provided you with above with the .video-wrap DIV and used outside the .container DIV.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AalhimlerSep 15, 2020

I see the issue you pointed to and was able to easily fix it. Great support! Thanks, Al

SSemicolon WebSTAFFSep 16, 2020

Hello,

Glad that the issue was resolved! Very Happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Slider Caption - Caption brightness changes when image brightness changes · Canvas Template Support