How to add a black hover to an image using bootstrap?

Last Updated : 13 Jun, 2022

Bootstrap is a popular CSS framework widely used by frontend developers to create interactive UI for web applications. Bootstrap is widely used because of its simplicity and ease to use. Bootstrap allows multiple utilities to make images interactive. One of these utilities can be changing the color of the image when hovered over. Hovering is basically moving the cursor over the image. The code snippet below demonstrates how to add a black hover to an image using bootstrap.

First Approach: In this method, the content-overlay class specifies the required properties of the image while the mouse hovers over it. The background property in the content-overlay class specifies the opacity of the image when the user hovers over it. The content-details class specifies the set of properties that are used for the content displayed on top of the image when the mouse hovers over it.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- importing bootstrap cdn-->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
    <style>
        /*setting the properties for container
        which contains the image */
        .container {
            margin-top: 5px;
        }
        /*setting the properties for title*/
        .title {
            color: #1a1a1a;
            text-align: center;
            margin-bottom: 10px;
        }
        /*setting the properties of
        content within the image*/
        .content {
            position: relative;
            width: 90%;
            max-width: 400px;
            margin: auto;
            overflow: hidden;
        }
        /* rgb(0,0,0) indicates black and
            the fourth parameter is the opacity */
        .content .content-overlay {
            /*setting 0.8 to 1 will turn the overlay opaque*/
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            height: 99%;
            width: 100%;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
            /*transition time and effect*/
            -webkit-transition: all 0.4s ease-in-out 0s;
            /*transition time and effect*/
            -moz-transition: all 0.4s ease-in-out 0s;
            /*transition time and effect*/
            transition: all 0.4s ease-in-out 0s;
        }
        /* setting hover properties */
        .content:hover .content-overlay {
            opacity: 1;
        }
        .content-image {
            width: 100%;
        }
        /*setting image properties*/
        img {
            box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        .content-details {
            position: absolute;
            text-align: center;
            padding-left: 1em;
            padding-right: 1em;
            width: 100%;
            top: 50%;
            left: 50%;
            opacity: 0;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*transition time and effect*/
            -webkit-transition: all 0.3s ease-in-out 0s;
            /*transition time and effect*/
            -moz-transition: all 0.3s ease-in-out 0s;
            /*transition time and effect*/
            transition: all 0.3s ease-in-out 0s;
        }
        .content:hover .content-details {
            top: 50%;
            left: 50%;
            opacity: 1;
        }
        .content-details h3 {
            color: #fff;
            font-weight: 500;
            letter-spacing: 0.15em;
            margin-bottom: 0.5em;
            text-transform: uppercase;
        }
        .content-details p {
            color: #fff;
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="content-overlay"></div>
            <img class="content-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" height="300px">
            <div class="content-details">
                <h3 class="content-title">
                    GeeksforGeeks
                </h3>
                <p class="content-text">
                    Hover out to view image
                </p>


            </div>
        </div>
    </div>
</body>
</html>

Output:

Before Hover:

After Hover:

Alternate approach: The second approach also deals with the hovering effect but here the hovering opacity is set to 1 which means the underlying image becomes completely hidden. The overlay class contains the set of specifications for the image when hovered over. The background color is set to black. The transition time and nature are also set.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <!--helps in scaling the web page
        according to the device screen size-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .main-container {
            display: flex;
            flex-direction: column;
            position: relative;
            justify-content: center;
            align-items: center;
            width: 600px;
        }

        /*image class sets the properties of the
                image used*/
        .image {
            display: block;
            width: 100%;
            height: auto;
        }

        /*overlay class sets the properties
                of the overlay image*/
        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            /*the transition time between the
            actual image to overlay*/
            transition: 0.3s ease;
            /*ensures black hover on the image*/
            background-color: black;
        }

        /*hovering property is set*/
        .inner-container:hover .overlay {
            opacity: 1;
        }

        /*properties for the text on the overlay image*/
        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="main-container">
        <h2>
            Adding black color to image
            using the overlay class
        </h2>

        
<p>Hover over the image to see the effect.</p>


        <div class="inner-container">
            <img src=
             "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png">
            
              <div class="overlay">
                <div class="text">
                    Hover out to view image
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Before Hover:

After Hover:

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

How to create full width container using bootstrap?

Shreyasi_Chakraborty

Improve

Article Tags :

How to add a black hover to an image using bootstrap?

Similar Reads

Bootstrap 5

Bootstrap 4

Bootstrap Questions

Thank You!

What kind of Experience do you want to share?