xxxxxxxxxx
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="smaple image">
<div class="mask flex-center rgba-blue-light">
<p class="white-text">Light overlay</p>
</div>
</div>
xxxxxxxxxx
<!--Zoom effect-->
<div class="view overlay zoom">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
<div class="mask flex-center">
<p class="white-text">Zoom effect</p>
</div>
</div>
xxxxxxxxxx
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="smaple image">
<div class="mask flex-center rgba-red-strong">
<p class="white-text">Strong overlay</p>
</div>
</div>
xxxxxxxxxx
<div class="view overlay">
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="smaple image">
<div class="mask flex-center rgba-green-slight">
<p class="white-text">Super light overlay</p>
</div>
</div>