Related Articles

Related Articles

How to add a black hover to an image using bootstrap?
  • Last Updated : 15 Sep, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <!-- importing bootstrap cdn-->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
        <style>
            /*setting the properties for container 
          which contains the image */
            .container {
                margin-top: 100px;
            }
            /*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="IMAGE.png" />
                <div class="content-details">
                    <h3 class="content-title">
                      Workstation</h3>
                    <p class="content-text">
                      Hover out to view image</p>
                </div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output:

Alternate approach:
The second approach also deals with 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 is also set.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

          
<!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>
            .container {
                position: relative;
                width: 50%;
            }
  
            /*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*/
            .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>
        <h2>Adding black color to image 
          using the overlay class</h2>
        <p>Hover over the image to see the effect.</p>
  
        <div class="container">
            <img src="IMAGE.png" />
            <div class="overlay">
                <div class="text">Click to view image</div>
            </div>
        </div>
    </body>
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :