Как удалить цвет заливки, чтобы изменить цвет изображения с помощью 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; } } |
Полный код:
Выход :