Hi,
I'm using sliders in home page of http://education.itwebappsolutions.com
I would like to have overlay on each image so that the text displayed on top of the image is clearly visible.
Can someone help me with the CSS class to be used?
Hello,
You can simply consider using the following code for each Slide:
<div class="swiper-slide" style="background-image: url('images/slider/swiper/1.jpg');">
<div class="container clearfix">
...
</div>
<div class="video-wrap" style="z-index: 1;">
<div class="video-overlay"></div>
</div>
</div>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
Thanks. I can see it's working now. However, I feel the overlay darkness is not enough to make the image a little dark to display the white text on it. Is it possible to change the darkness level of the overlay? Please let me know on how to achieve it.
Hello,
You can simply change the .video-overlay Element as following to tweak the Darkness:
<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you. It worked
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