1. Nadajemy klasę np. service-icon
2. Wklejamy kod CSS:
/* Upewnij się, że element z ikoną (service-icon) jest okrągły */
.custom-services-hover .service-icon {
position: relative;
border-radius: 50%; /* kształt kółka */
transition: background-color 0.3s ease;
}
/* Na hoverie zmieniamy tło, ale zachowujemy kształt */
.custom-services-hover:hover .service-icon {
background-color: #1364FF;
border-radius: 50%;
}
/* Ukrywamy oryginalne SVG na hoverie */
.custom-services-hover:hover .service-icon svg {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
/* Na hoverie dodajemy pseudoelement z nową ikoną */
.custom-services-hover:hover .service-icon::before {
content: url("https://demo4.sarnetski.pl/wp-content/uploads/2025/03/Line-3.svg"); /*link do nowej ikonki*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}