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

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:
<!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: 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>
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:
          <!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>
Output:
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript