如何使用 HTML 和 CSS 删除填充颜色以更改图像颜色？

在本文中，我们将使用 HTML 和 CSS 创建一个 Drop 填充颜色效果，其中当我们将鼠标悬停在图像上时，图像会被着色。当您将鼠标悬停在图像上时，会出现一滴颜色落在图像上，从而将图像的颜色从灰色变为彩色。

方法：

1. 创建一个 HTML 文件，在其中添加文本和图像的 div。
2. 然后我们必须使用悬停属性来使我们的图像着色。
3. 我们还在项目中使用了像 ::before 和 ::after 这样的伪类。
4. 使用@keyframes 来移动我们的水滴。

HTML代码：

• 首先，创建一个 HTML 文件 (index.html)。
• 然后将提供所有动画效果的 CSS 文件链接到我们的 HTML。它也被放置在 部分内。
• 来到我们 HTML 代码的正文部分：
  • 首先，我们必须创建一个主div。
  • 然后，我们给主 div 一个类，并在当前 div 中创建另一个 div 以将图像放入其中。

HTML

 

 
    

 

    

        hover over the icon to
        get the icon colored
    
     
    

        

    

 

CSS 代码： CSS 用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对所有用户都具有交互性。

在 CSS 中我们必须提醒以下几点——

1. 恢复所有浏览器效果。
2. 使用类和 id 为 HTML 元素赋予效果。
3. 使用 :hover 来使用悬停效果。
4. 使用@keyframes 来移动我们的水滴。
5. 伪类的使用。

HTML

/* 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;
    }
}

完整代码：

HTML

 

    

 

    

        hover over the icon to
        get the icon colored
    
     
    

        

    

 

输出 ：