Submitted
I would like to know what approach anyone might have used for the hero image and the overlay.
I started with the HTML first. I am very particular about accessibility, so my first concern was to ensure that I have an HTML that was meaningful without any styling.
This influenced how I approached the hero image. I was going to insert the image as an URL() background-image via CSS and then use a RGBA() to add the purple overlay as a background-color, but I realized it would pass no meaning to persons using screen readers or assistive technology. Additionally, I realized that I would not be able to use multiple sources for the image if inserted as a background. So I used the srcset attribute with the img tag.
I included the hero image as an img tag, added an alt text and achieved the pink overlay using mix-blend-mode instead. Now everyone can appreciate the page and not just visual users.
Still would like to know what approach anyone might have used for the hero image and the overlay.