<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="">
    <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="">
    <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="">
    <div class="mask flex-center rgba-grey-slight">
        <p class="white-text">Super lichte bedekking</p>
    </div>
</div>

Hover Effects

Based on the version from MDB:
https://mdbootstrap.com/css/hover-effects/#basic-examples

Accessibility

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.

Using

No additional actions, aside from the markup, are needed to use this component.

Notes

  • MDB defines more hover effects, yet Nijmegen only needed 3 therefore the library supports light, strong and super light overlays.