Currently, I am working on a project and I am interested in using a full-screen carousel. I came across this carousel snippet: . I am using the latest Bootstrap 3 version (3.3.7), but the snippet was originally built for version 3.2.0.
If you try changing the Bootstrap version in the bootsnipp link to the latest version, you will see the issue I am facing. The problem is that the DIV .overlay, which darkens the background of each slide in the carousel, is also overlapping the text and button on the slide, causing them to become dark as well. I have attempted to adjust the z-index of the .hero class (containing the text and button) and its child elements, but this solution did not work. Lowering the z-index of the overlay also did not resolve the issue.
This problem only occurs in Bootstrap 3.3.7 and not in 3.2.0. I am currently struggling to find a workaround for this issue.
Any suggestions or help would be greatly appreciated. Thank you.