Hover effects
Shadow effect
![Sample image](https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(132).jpg)
Colors and intensity
Use one of the classes below to change the color and intensity of the overlay.
Light overlay
.rgba-blue-light
.rgba-red-light
.rgba-pink-light
.rgba-purple-light
.rgba-indigo-light
.rgba-cyan-light
.rgba-teal-light
.rgba-green-light
.rgba-lime-light
.rgba-yellow-light
.rgba-orange-light
.rgba-brown-light
.rgba-grey-light
.rgba-blue-grey-light
.rgba-black-light
.rgba-stylish-light
.rgba-white-light
Strong overlay
.rgba-blue-strong
.rgba-red-strong
.rgba-pink-strong
.rgba-purple-strong
.rgba-indigo-strong
.rgba-cyan-strong
.rgba-teal-strong
.rgba-green-strong
.rgba-lime-strong
.rgba-yellow-strong
.rgba-orange-strong
.rgba-brown-strong
.rgba-grey-strong
.rgba-blue-grey-strong
.rgba-black-strong
.rgba-stylish-strong
.rgba-white-strong
Super Light overlay
.rgba-blue-slight
.rgba-red-slight
.rgba-pink-slight
.rgba-purple-slight
.rgba-indigo-slight
.rgba-cyan-slight
.rgba-teal-slight
.rgba-green-slight
.rgba-lime-light
.rgba-yellow-slight
.rgba-orange-slight
.rgba-brown-slight
.rgba-grey-slight
.rgba-blue-grey-slight
.rgba-black-slight
.rgba-stylish-slight
.rgba-white-slight
Full documentation
Read the full documentation for these components.
Learn more