<p>Light overlay</p>
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(7).jpg" class="img-fluid" alt="Voorbeeld afbeelding">
<div class="mask flex-center rgba-grey-light">
<p class="white-text">Lichte bedekking</p>
</div>
</div>
<p>Strong overlay</p>
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(7).jpg" class="img-fluid" alt="Voorbeeld afbeelding">
<div class="mask flex-center rgba-grey-strong">
<p class="white-text">Sterke bedekking</p>
</div>
</div>
<p>Super light overlay</p>
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(7).jpg" class="img-fluid" alt="Voorbeeld afbeelding">
<div class="mask flex-center rgba-grey-slight">
<p class="white-text">Super lichte bedekking</p>
</div>
</div>
Based on the version from MDB:
https://mdbootstrap.com/css/hover-effects/#basic-examples
Regarding the alt attribute on the images, please follow the decision tree as can be seen here https://www.w3.org/WAI/tutorials/images/decision-tree/.
Only use the light or super light overlays if you can ensure there is enough contrast where there is white text on the background.
No additional actions, aside from the markup, are needed to use this component.
light, strong and super light overlays.