Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to drop fill color to change the image color using HTML and CSS?
In the world of web development, it's essential to have knowledge about the latest CSS and HTML techniques to add stunning visual effects to a website. One such effect is the "color drop effect," which allows you to change the color of an image on hover by dropping a fill color on it.
With this effect, you can make your website more interactive and engaging for the visitors. In this article, we will guide you through the process of creating a color drop effect using HTML and CSS. So, whether you are a beginner or an experienced web developer, stay tuned to learn this exciting visual effect.
What is Drop Fill Color Effect?
The drop fill color effect is a visual effect applied to an image or graphic using HTML and CSS, where a drop of color appears on the image when hovered over, causing the image to change color.
The effect creates the illusion of a drop of color falling onto the image and spreading across it, creating a dramatic and dynamic effect. This effect can be used to add interactivity and visual interest to a website, making it more engaging for users.
To achieve this effect we have to use certain properties let us look at them on by one −
Filter property − The filter property in CSS is used to apply visual effects to an element's content. It allows you to adjust the appearance of images and other graphical elements using a variety of filter functions.
The filter property can take one or more filter functions, which are applied in order. There are a number of different filter functions available, each of which applies a different type of visual effect.
Clip-path property − The clip-path CSS property is used to create a clipping path, which is a non-rectangular region that defines the visible area of an element. The property is used to hide parts of an element that fall outside of the clipping path, allowing for complex shapes and effects that were previously only possible with image masks or SVG.
::before pseudo element − The ::before pseudo-element in CSS creates a pseudo-element that is inserted before the content of an element. It is used to insert content before an element, without needing to add any additional HTML markup.
One common use of the ::before pseudo-element is to add decorative content, such as icons or shapes, before an element. The ::before pseudo-element can also be used to add text, background images, and other content.
Steps to be Followed
Following are the steps followed in this example −
Step1 − The .icon-container div is used to create a container for the icon/image. Apply box-sizing: border-box to all elements on the page, and set the margin and padding of all elements to 0.
Step 2 − The body element is then set to display: flex with justify-content: center and align-items: center to center the container element vertically and horizontally on the page. The background color of the body element is set to a dark gray (#333).
Step 3 − Next, we need to style the container element that will have the color drop effect. It is given a relative position, a width and height of 200 pixels, and a background image that is centered and covers the entire container element.
Step 4 − Then, we create the color drop effect on hover. A ::before pseudo-element is used to create a white circle that will be clipped to reveal the underlying background image when hovered over.
The filter property is used to set the background image to grayscale (i.e., black and white), and the cursor property is set to pointer to indicate to the user that the element is clickable.
The clip-path property is set to circle(0% at 50% 0%) to start with a clipped circle that has a radius of 0% (i.e., no visible area), positioned at the center top of the container element.
When the element is hovered over, the clip-path property is transitioned to circle(100% at 50% 0%), which creates a circle that covers the entire container element. This transition is animated with a duration of 0.4 seconds and an ease-out timing function.
Example
Let us see the example −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Color Drop Effect </title>
<style>
/* Resetting default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centering the container */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
/* Creating the color drop effect */
.icon-container {
position: relative;
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/200');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(100%);
cursor: pointer;
}
.icon-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
clip-path: circle(0% at 50% 0%);
transition: clip-path 0.4s ease-out;
}
.icon-container:hover::before {
clip-path: circle(100% at 50% 0%);
}
</style>
</head>
<body>
<div class="icon-container"></div>
</body>
</html>
Conclusion
In conclusion, using the color drop effect in HTML and CSS can be a fun and creative way to enhance the visual appeal of your website or web application. With the ability to change the color of an image on hover, you can add a dynamic element that captures the attention of your users and makes your content stand out.
In this article, we have explored the basic principles of using the color drop effect to change the color of an image. We covered the use of the filter property to manipulate the grayscale of the image, the :before pseudo-element to create an overlay, and the clip-path property to create a circular mask that reveals the color on hover.
By implementing this effect, you can create a more engaging user experience and add some personality to your website. With some experimentation and creativity, you can take this technique even further and create more complex color drop effects that truly stand out.
1K+ Views
