My challenge is centering text over multiple images using a combination of Bootstrap and CSS. While most online resources suggest using position: absolute; to achieve this, I have only been successful in centering the text in the middle of the screen rather than directly over the image. I suspect that Bootstrap may be causing some interference.
I aim to have the text on top of the images with animation effects like fading in as the user interacts with them.
Although I've researched extensively on this topic, most tutorials and articles focus on achieving this effect with a single image. Attempting to apply similar techniques to multiple images seems to require a different strategy altogether.
In an effort to troubleshoot, here is the relevant snippet of code:
.imgText {
position: absolute;
z-index: -1;
}
.imgList {
z-index: -2;
} <div class="row justify-content-center mt-3">
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
</div>You can view the live results here.