Как удалить цвет заливки, чтобы изменить цвет изображения с помощью HTML и CSS?

Опубликовано: 27 Августа, 2022

В этой статье мы собираемся создать цветовой эффект Drop fill с помощью HTML и CSS, в котором изображение окрашивается, когда мы наводим на него курсор. Появляется, когда вы наводите курсор на изображение, на изображение падает капля цвета, которая меняет цвет изображения с серого на цветной.

Подход:

Создайте файл HTML, в который мы добавим текст и div для изображения.
Затем мы должны использовать свойство hover, чтобы сделать наше изображение цветным.
Мы также используем псевдоклассы, такие как ::before и ::after в нашем проекте.
Использование @keyframes для движения капли.

HTML-код:

Сначала создайте файл HTML (index.html).
Затем свяжите файл CSS, обеспечивающий все эффекты анимации, с нашим HTML. Он также находится внутри раздела <head>.
Переходим к разделу body нашего HTML-кода:
- Во-первых, мы должны создать основной div.
- Затем мы даем основному div класс и создаем другой div внутри существующего div, чтобы поместить в него изображение.

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: CSS используется для добавления различных типов анимации и эффектов к нашей HTML-странице, чтобы она выглядела интерактивной для всех пользователей.

В CSS мы должны напомнить следующие моменты:

Восстановите все эффекты браузера.
Используйте классы и идентификаторы, чтобы придать эффекты элементам HTML.
Использование :hover для использования эффектов наведения.
Использование @keyframes для движения капли.
Использование псевдоклассов.

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

Полный код:

Выход :

Technical Scripter HTML CSS

Как удалить цвет заливки, чтобы изменить цвет изображения с помощью HTML и CSS?

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ