bootsrap caption on hover

<img src="[...]" class="hoverable">

<!--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>

<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>

<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>

<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>