Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
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.
Key CSS Properties
To achieve this effect, we use several important CSS properties ?
Filter property The
filterproperty applies visual effects to an element's content, such as grayscale, blur, or brightness adjustments.Clip-path property The
clip-pathproperty creates a clipping path that defines the visible area of an element in complex shapes.::before pseudo element The
::beforepseudo-element creates a virtual element that is inserted before the content of an element.
Syntax
.element {
filter: grayscale(100%);
position: relative;
}
.element::before {
content: '';
position: absolute;
clip-path: circle(0% at 50% 0%);
transition: clip-path 0.4s ease-out;
}
.element:hover::before {
clip-path: circle(100% at 50% 0%);
}
Example: Color Drop Effect
Let's create a color drop effect that reveals the original color of a grayscale image on hover ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
.icon-container {
position: relative;
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/200/4CAF50/ffffff?text=Sample');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(100%);
cursor: pointer;
border-radius: 10px;
overflow: hidden;
}
.icon-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: inherit;
background-position: inherit;
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>
A grayscale image appears in the center of a dark background. When you hover over it, a circular color drop effect starts from the top center and expands to reveal the full color version of the image.
How It Works
The effect works through these key steps ?
The main container has a
filter: grayscale(100%)to make the background image black and whiteThe
::beforepseudo-element contains the original colored imageInitially,
clip-path: circle(0% at 50% 0%)hides the colored versionOn hover,
clip-path: circle(100% at 50% 0%)reveals the full colored image with a smooth transition
Conclusion
The color drop effect is an excellent way to add interactivity to your images. By combining CSS filters, clip-path, and pseudo-elements, you can create engaging hover effects that enhance user experience and make your website more dynamic.
2K+ Views
