To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect:
The HTML for the slider text is as follows:
.zlslides .ms-slide-link {
background-color: rgb(0, 0, 0);
opacity: 0.65;
}
<h2 class="master_event_title">Brasil Loves Baile Funk ft Naldo • Dance Party</h2>Here is the CSS for styling the text:
.master_event_title {
color: rgb(255, 255, 255);
font-size: 30px;
font-weight: 700;
position: relative;
text-align: center;
top: 41%;
z-index: 999;
}
By using z-index: 999;, the slider text appears in white color.
However, there is an issue where the slider text only displays in white color in Firefox browser. In Google Chrome and Safari browsers, the slider text does not appear in white color. Without z-index: 999;, the text does not display in white color at all. To address this issue in Google Chrome and Safari, the following CSS rule was applied:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.master_event_title{z-index: 999;}
}
Unfortunately, the above CSS did not resolve the problem. If anyone knows how to fix this issue, please reply. I have attached a screenshot of the problem in Google Chrome for reference.
https://i.sstatic.net/lH81o.jpg
Thanks, Ketan.