Hover effects

Bootstrap hover effects

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

A Bootstrap hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.

However, we don't recommend that you mix hover effects with functional elements (like a drop-down on hover or hidden buttons visible only after hovering) because such approach isn't mobile-friendly.

MDB is a mobile-first framework, so we attach great importance on making each component easy to use for touch screens.

That's why our hover effects are gentle and decorative.

Basic examples

Strong overlay

Light overlay

Super light overlay

Zoom effect

Shadow effect

Strong red overlay

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.webp" class="img-fluid " alt="smaple image">
            <div class="mask flex-center rgba-red-strong">
                <p class="white-text">Strong overlay</p>
            </div>
        </div>

Light blue overlay

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.webp" class="img-fluid " alt="smaple image">
            <div class="mask flex-center rgba-blue-light">
                <p class="white-text">Light overlay</p>
            </div>
        </div>

Super light green overlay

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.webp" class="img-fluid " alt="smaple image">
            <div class="mask flex-center rgba-green-slight">
                <p class="white-text">Super light overlay</p>
            </div>
        </div>

Zoom effect

Show code Edit in sandbox

HTML

        
            

        <!--Zoom effect-->
        <div class="view overlay zoom">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).webp" class="img-fluid " alt="smaple image">
            <div class="mask flex-center">
                <p class="white-text">Zoom effect</p>
            </div>
        </div>

Shadow effect

Show code Edit in sandbox

HTML

        
            

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

Instructions

Step 1: Create a wrapper containing the class .view.

Show code Edit in sandbox

HTML

        
            

        <div class="view">
            [...]
        </div>

Step 2: Add a class for the effect you want to use (for example .overlay or .zoom).

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            [...]
        </div>

Step 3: Set a path to the image. If you want to make your image responsive, remember to add the class.img-fluid.

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(3).webp" class="img-fluid " alt="">
        </div>

Step 4: Add the class .mask to cover the image with the overlay and choose the color and intensity of the overlay.

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(3).webp" class="img-fluid " alt="">
             <div class="mask rgba-red-strong">

            </div>
        </div>

Step 5: If you want to add some text, you can use the class .flex-center to center it, and .white-text to give your text a stronger contrast and make it more visible.

Show code Edit in sandbox

HTML

        
            

        <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(3).webp" class="img-fluid " alt="">
            <div class="mask flex-center rgba-red-strong">
                <p class="white-text">Strong overlay</p>
            </div>
        </div>

Zoom effect.

To use a zoom effect, follow the instruction above, but instead of .overlay add the class .zoom.

Shadow effect.

To use a shadow effect, you only need to add the .hoverable class to the chosen element.

Colors and intensity

Use one of the classes below to change the color and intensity of the overlay.

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

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

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

.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

Gradient overlay

To make gradient partialy overlay your photo on hover add css to set opacity to the desired value. This example has styling as follows: .overlay .mask:hover { opacity: 0.5; }

.warm-flame-gradient

.night-fade-gradient

.spring-warmth-gradient

.juicy-peach-gradient

.young-passion-gradient

.rainy-ashville-gradient

.sunny-morning-gradient

.lady-lips-gradient

.winter-neva-gradient

.frozen-dreams-gradient

.dusty-grass-gradient

.tempting-azure-gradient

.heavy-rain-gradient

.amy-crisp-gradient

.mean-fruit-gradient

.deep-blue-gradient

.ripe-malinka-gradient

.cloudy-knoxville-gradient

.morpheus-den-gradient

.rare-wind-gradient

.near-moon-gradient