Skip to content
Related Articles

Related Articles

How to Drop fill color to change the image color using HTML and CSS ?
  • Last Updated : 23 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

In this article, we are going to create a Drop fill color effect using HTML & CSS in which the image get colored when we hover over it. It appears when you hover over the image a drop of color falls over the image which changes the color of the image from gray to colored.

Approach:

  1. Create an HTML file in which we add the text and a div for the image.
  2. Then we have to use the hover property to make our image colored.
  3. We also use pseudo-classes like ::before and ::after in our project.
  4. Use of @keyframes for movement of our drop.

HTML Code:

  • First, create a HTML file (index.html).
  • Then link the CSS file that provides all the animation’s effect to our HTML. It is also placed in inside the <head> section.
  • Coming to the body section of our HTML code:
    • First, we have to create a main div.
    • Then, we give the main div a class and create another div inside the present div to put an image into it.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <h1>
        hover over the icon to 
        get the icon colored
    </h1>
      
    <div class="main_box">
        <div class="img"></div>
    </div>
</body>
  
</html>

CSS Code: CSS is used to give different types of animations and effect to our HTML page so that it looks interactive to all users.



In CSS we have to remind the following points –

  1. Restore all the browser effects.
  2. Use classes and ids to give effects to HTML elements.
  3. Use of :hover to use hover effects.
  4. Use of @keyframes for movement of our drop.
  5. Use of pseudo-classes.

CSS




/* Restoring the browser effects */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
/* Applying all of the same 
functionalities to the body */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    height: 100vh;
}
  
h1{
    color: rgb(0, 255, 115);
    margin-right: 2em;
}
  
.main_box{
    width: 15em;
    height: 15em;
    position: relative;
    cursor: pointer;
}
  
.img,.main_box::before{
    width: 100%;
    height: 100%;
    background-image: url(gfg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  
/* Changing the image to gray color */
.img{
    filter: grayscale(100%);
}
  
  
/* Code for drop of color */
.main_box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    clip-path: circle(0 at 50% 0);
    transition: all .3s;
    z-index: 1;
}
  
.main_box::after{
    content: '';
    position: absolute;
    top: -6em;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25em;
    height: 1.25em;
    background-image: linear-gradient(#006800 , #014716);
    border-radius: 0 10em 10em 10em;
    opacity: 0;
    transform: rotate(45deg);
}
  
.main_box:hover::after{
    animation: neeche 0.5s cubic-bezier(1,0,1,.81);
}
  
.main_box:hover::before{
    clip-path: circle(31em at 50% 0);
    transition-delay: .5s;
}
  
@keyframes neeche{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        top: 6em;
    }
}

Complete Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
  
        /* Restoring the browser effects */
          
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
  
        /* Applying all of the same 
        functionalities to the body */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            height: 100vh;
        }
          
        h1 {
            color: rgb(0, 255, 115);
            margin-right: 2em;
        }
          
        .main_box {
            width: 15em;
            height: 15em;
            position: relative;
            cursor: pointer;
        }
          
        .img,
        .main_box::before {
            width: 100%;
            height: 100%;
            background-image: url(
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
  
        /* Chaging the image to gray color */
        .img {
            filter: grayscale(100%);
        }
  
        /* Code for drop of color */
        .main_box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            clip-path: circle(0 at 50% 0);
            transition: all .3s;
            z-index: 1;
        }
          
        .main_box::after {
            content: '';
            position: absolute;
            top: -6em;
            left: 50%;
            transform: translateX(-50%);
            width: 1.25em;
            height: 1.25em;
            background-image: linear-gradient(
                        #006800, #014716);
  
            border-radius: 0 10em 10em 10em;
            opacity: 0;
            transform: rotate(45deg);
        }
          
        .main_box:hover::after {
            animation: neeche 0.5s 
                cubic-bezier(1, 0, 1, .81);
        }
          
        .main_box:hover::before {
            clip-path: circle(31em at 50% 0);
            transition-delay: .5s;
        }
          
        @keyframes neeche {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
                top: 6em;
            }
        }
    </style>
</head>
  
<body>
    <h1>
        hover over the icon to 
        get the icon colored
    </h1>
      
    <div class="main_box">
        <div class="img"></div>
    </div>
</body>
  
</html>

Output :

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :