Nijmegen Component Library
You are viewing version 6.3.2 of the library, the latest version is

Hover Effects 

<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">Kleurbedekking</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 one because of accessibility standards. Therefore the library only supports the strong overlay.