<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="colors-intensity"> <!--Title--> <h2 class="section-heading"> Colors and intensity </h2> <!--Description--> <p class="mb-4">Use one of the classes below to change the color and intensity of the overlay.</p> <!--Section: Live preview--> <section> <br> <h4>Strong overlay</h4> <br> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong blue overlay."> <div class="mask rgba-blue-strong"></div> </div> <p class="text-center"><code>.rgba-blue-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong red overlay."> <div class="mask rgba-red-strong"></div> </div> <p class="text-center"><code>.rgba-red-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong pink overlay."> <div class="mask rgba-pink-strong"></div> </div> <p class="text-center"><code>.rgba-pink-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong purple overlay."> <div class="mask rgba-purple-strong"></div> </div> <p class="text-center"><code>.rgba-purple-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong indigo overlay."> <div class="mask rgba-indigo-strong"></div> </div> <p class="text-center"><code>.rgba-indigo-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong cyan overlay."> <div class="mask rgba-cyan-strong"></div> </div> <p class="text-center"><code>.rgba-cyan-strong</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong teal overlay."> <div class="mask rgba-teal-strong"></div> </div> <p class="text-center"><code>.rgba-teal-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong green overlay."> <div class="mask rgba-green-strong"></div> </div> <p class="text-center"><code>.rgba-green-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong lime overlay."> <div class="mask rgba-lime-strong"></div> </div> <p class="text-center"><code>.rgba-lime-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong yellow overlay."> <div class="mask rgba-yellow-strong"></div> </div> <p class="text-center"><code>.rgba-yellow-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong orange overlay."> <div class="mask rgba-orange-strong"></div> </div> <p class="text-center"><code>.rgba-orange-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong brown overlay."> <div class="mask rgba-brown-strong"></div> </div> <p class="text-center"><code>.rgba-brown-strong</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong grey overlay."> <div class="mask rgba-grey-strong"></div> </div> <p class="text-center"><code>.rgba-grey-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong blue-grey overlay."> <div class="mask rgba-blue-grey-strong"></div> </div> <p class="text-center"><code>.rgba-blue-grey-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong black overlay."> <div class="mask rgba-black-strong"></div> </div> <p class="text-center"><code>.rgba-black-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong stylish overlay."> <div class="mask rgba-stylish-strong"></div> </div> <p class="text-center"><code>.rgba-stylish-strong</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" class="img-fluid" alt="Image with a strong white overlay."> <div class="mask rgba-white-strong"></div> </div> <p class="text-center"><code>.rgba-white-strong</code></p> </div> </div> <br> <h4>Light overlay</h4> <br> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light blue overlay."> <div class="mask rgba-blue-light"></div> </div> <p class="text-center"><code>.rgba-blue-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light red overlay."> <div class="mask rgba-red-light"></div> </div> <p class="text-center"><code>.rgba-red-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light pink overlay."> <div class="mask rgba-pink-light"></div> </div> <p class="text-center"><code>.rgba-pink-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light purple overlay."> <div class="mask rgba-purple-light"></div> </div> <p class="text-center"><code>.rgba-purple-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light indigo overlay."> <div class="mask rgba-indigo-light"></div> </div> <p class="text-center"><code>.rgba-indigo-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light cyan overlay."> <div class="mask rgba-cyan-light"></div> </div> <p class="text-center"><code>.rgba-cyan-light</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light teal overlay."> <div class="mask rgba-teal-light"></div> </div> <p class="text-center"><code>.rgba-teal-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light green overlay."> <div class="mask rgba-green-light"></div> </div> <p class="text-center"><code>.rgba-green-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light lime overlay."> <div class="mask rgba-lime-light"></div> </div> <p class="text-center"><code>.rgba-lime-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light yellow overlay."> <div class="mask rgba-yellow-light"></div> </div> <p class="text-center"><code>.rgba-yellow-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light orange overlay."> <div class="mask rgba-orange-light"></div> </div> <p class="text-center"><code>.rgba-orange-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light brown overlay."> <div class="mask rgba-brown-light"></div> </div> <p class="text-center"><code>.rgba-brown-light</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light grey overlay."> <div class="mask rgba-grey-light"></div> </div> <p class="text-center"><code>.rgba-grey-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light blue-grey overlay."> <div class="mask rgba-blue-grey-light"></div> </div> <p class="text-center"><code>.rgba-blue-grey-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light black overlay."> <div class="mask rgba-black-light"></div> </div> <p class="text-center"><code>.rgba-black-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light stylish overlay."> <div class="mask rgba-stylish-light"></div> </div> <p class="text-center"><code>.rgba-stylish-light</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" alt="Image with a light white overlay."> <div class="mask rgba-white-light"></div> </div> <p class="text-center"><code>.rgba-white-light</code></p> </div> </div> <br> <h4>Super light overlay</h4> <br> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight blue overlay."> <div class="mask rgba-blue-slight"></div> </div> <p class="text-center"><code>.rgba-blue-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight red overlay."> <div class="mask rgba-red-slight"></div> </div> <p class="text-center"><code>.rgba-red-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight pink overlay."> <div class="mask rgba-pink-slight"></div> </div> <p class="text-center"><code>.rgba-pink-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight purple overlay."> <div class="mask rgba-purple-slight"></div> </div> <p class="text-center"><code>.rgba-purple-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight indigo overlay."> <div class="mask rgba-indigo-slight"></div> </div> <p class="text-center"><code>.rgba-indigo-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight cyan overlay."> <div class="mask rgba-cyan-slight"></div> </div> <p class="text-center"><code>.rgba-cyan-slight</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight teal overlay."> <div class="mask rgba-teal-slight"></div> </div> <p class="text-center"><code>.rgba-teal-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight green overlay."> <div class="mask rgba-green-slight"></div> </div> <p class="text-center"><code>.rgba-green-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight lime overlay."> <div class="mask rgba-lime-slight"></div> </div> <p class="text-center"><code>.rgba-lime-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight yellow overlay."> <div class="mask rgba-yellow-slight"></div> </div> <p class="text-center"><code>.rgba-yellow-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight orange overlay."> <div class="mask rgba-orange-slight"></div> </div> <p class="text-center"><code>.rgba-orange-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight brown overlay."> <div class="mask rgba-brown-slight"></div> </div> <p class="text-center"><code>.rgba-brown-slight</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight grey overlay."> <div class="mask rgba-grey-slight"></div> </div> <p class="text-center"><code>.rgba-grey-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight blue-grey overlay."> <div class="mask rgba-blue-grey-slight"></div> </div> <p class="text-center"><code>.rgba-blue-grey-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight black overlay."> <div class="mask rgba-black-slight"></div> </div> <p class="text-center"><code>.rgba-black-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight stylish overlay."> <div class="mask rgba-stylish-slight"></div> </div> <p class="text-center"><code>.rgba-stylish-slight</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight white overlay."> <div class="mask rgba-white-slight"></div> </div> <p class="text-center"><code>.rgba-white-slight</code></p> </div> </div> <br> <h4>Gradient overlay</h4> <br> <p>To make gradient partialy overlay your photo on hover add css to set opacity to the desired value. This example has styling as follows: <code> .overlay .mask:hover { opacity: 0.5; }</code></p> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight blue overlay."> <div class="mask warm-flame-gradient"></div> </div> <p class="text-center"><code>.warm-flame-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight red overlay."> <div class="mask night-fade-gradient "></div> </div> <p class="text-center"><code>.night-fade-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight pink overlay."> <div class="mask spring-warmth-gradient"></div> </div> <p class="text-center"><code>.spring-warmth-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight purple overlay."> <div class="mask juicy-peach-gradient"></div> </div> <p class="text-center"><code>.juicy-peach-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight indigo overlay."> <div class="mask young-passion-gradient"></div> </div> <p class="text-center"><code>.young-passion-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight cyan overlay."> <div class="mask rainy-ashville-gradient"></div> </div> <p class="text-center"><code>.rainy-ashville-gradient</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight blue overlay."> <div class="mask sunny-morning-gradient"></div> </div> <p class="text-center"><code>.sunny-morning-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight red overlay."> <div class="mask lady-lips-gradient "></div> </div> <p class="text-center"><code>.lady-lips-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight pink overlay."> <div class="mask winter-neva-gradient"></div> </div> <p class="text-center"><code>.winter-neva-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight purple overlay."> <div class="mask frozen-dreams-gradient"></div> </div> <p class="text-center"><code>.frozen-dreams-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight indigo overlay."> <div class="mask dusty-grass-gradient"></div> </div> <p class="text-center"><code>.dusty-grass-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight cyan overlay."> <div class="mask tempting-azure-gradient"></div> </div> <p class="text-center"><code>.tempting-azure-gradient</code></p> </div> </div> <div class="row"> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight blue overlay."> <div class="mask heavy-rain-gradient"></div> </div> <p class="text-center"><code>.heavy-rain-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight red overlay."> <div class="mask amy-crisp-gradient "></div> </div> <p class="text-center"><code>.amy-crisp-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight pink overlay."> <div class="mask mean-fruit-gradient"></div> </div> <p class="text-center"><code>.mean-fruit-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight purple overlay."> <div class="mask deep-blue-gradient"></div> </div> <p class="text-center"><code>.deep-blue-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight indigo overlay."> <div class="mask ripe-malinka-gradient "></div> </div> <p class="text-center"><code>.ripe-malinka-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight cyan overlay."> <div class="mask cloudy-knoxville-gradient"></div> </div> <p class="text-center"><code>.cloudy-knoxville-gradient</code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight purple overlay."> <div class="mask morpheus-den-gradient"></div> </div> <p class="text-center"><code>.morpheus-den-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight indigo overlay."> <div class="mask rare-wind-gradient "></div> </div> <p class="text-center"><code>.rare-wind-gradient </code></p> </div> <div class="col-md-2"> <div class="view overlay"> <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Image with a slight cyan overlay."> <div class="mask near-moon-gradient"></div> </div> <p class="text-center"><code>.near-moon-gradient</code></p> </div> </div> </section> <!--Section: Live preview--> </section>