VOOZH about

URL: https://www.geeksforgeeks.org/web-templates/how-to-drop-fill-color-to-change-the-image-color-using-html-and-css/

⇱ How to Drop fill color to change the image color using HTML and CSS ? - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

How to Drop fill color to change the image color using HTML and CSS ?

Last Updated : 5 Aug, 2025

In this article, we are going to create a Drop-fill color effect using HTML & CSS in which the image gets 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: The following approach will be implemented to Drop fill color to change the image color:

  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 an HTML file (index.html).
  • Then link the CSS file that provides all the animation's effects 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.

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.

Complete Code: This is the complete code that describes the Drop fill color to change the image color using HTML and CSS.

Output:

Hovering over the icon changes the colored of GFG logo:

👁 img
Comment