Homepage Slider text over images

In the homepage slider, when the post text transforms/animates over the featured image, there can be a conflict of text color over the image coloring. The conflict is dependent on where the text lands over the image. An image is ideal where there is a lot of room to the left, in an open area of a bright color, where dark text can appear anywhere in that area and still look good.

I’m trying to reduce the requirement to match images so carefully to this specific purpose. So in the post, right now I’m adding a div tag to set a light background with medium transparancy – so dark text will be readable against an always-lighter background, but the transparency allows some of the background image to show through.

While “functional”, that’s not an ideal solution. Even with the post text in a block, the post title now needs to be similarly styled, requiring changes to the theme CSS. Also, for some reason with a div>style>background, the slider-content div positions this post text at the left side of the content space, while without a background it postions it correctly under the title. I’ve tried to change the position, float, and other style elements but I haven’t yet got it to reposition correctly.

Again, I’d just like to minimize this effort. Can anyone suggest a better way to match text and images so that when this specific slider/animation activates, that there is a better “fit” without heavy customization? Can we follow some general guideline that will work for a wide variety of images and this animiation/transform?

Thanks!